How to use the @ephox/katamari.Option.from function in @ephox/katamari

const getParentBlock = (editor: Editor, rng: Range) => {
  const parentBlockOpt = Option.from(editor.dom.getParent(rng.startContainer, editor.dom.isBlock));
  if (Settings.getForcedRootBlock(editor) === '') {
    return parentBlockOpt.orThunk(() => Option.some(editor.getBody()));
  } else {
    return parentBlockOpt;
  }
};

spec.setInitialValue.each((f) => f(api.getComponent()));
    return spec.nodeChangeHandler.map((f) => {
      const handler = f(api.getComponent());
      editor.on('NodeChange', handler);

      return () => {
        editor.off('NodeChange', handler);
      };
    }).getOr(Fun.noop);
  };

  return renderCommonDropdown(
    {
      text: spec.icon.isSome() ? Option.none() : Option.some(''),
      icon: spec.icon,
      tooltip: Option.from(spec.tooltip),
      role: Option.none(),
      fetch: items.getFetch(backstage, getStyleItems),
      onSetup,
      getApi,
      columns: 1,
      presets: 'normal',
      classes: spec.icon.isSome() ? [] : [ 'bespoke' ],
      dropdownBehaviours: []
    },
    ToolbarButtonClasses.Button,
    backstage.shared
  );
};

const getMinHeightSetting = (editor): Option => Option.from(editor.settings.min_height).filter(Type.isNumber);
const getMaxWidthSetting = (editor): Option => Option.from(editor.getParam('max_width')).filter(Type.isNumber);

onAction: (formApi) => {
          const anchor = Utils.getAnchorElement(editor);
          const value = formApi.getValue();
          if (!anchor) {
            const attachState = { href: value, attach: () => { } };
            const onlyText = Utils.isOnlyTextSelected(editor.selection.getContent());
            const text: Option = onlyText ? Option.some(Utils.getAnchorText(editor.selection, anchor)).filter((t) => t.length > 0).or(Option.from(value)) : Option.none();
            Utils.link(editor, attachState, {
              href: value,
              text,
              title: Option.none(),
              rel: Option.none(),
              target: Option.none(),
              class: Option.none()
            });
            formApi.hide();
          } else {
            editor.dom.setAttrib(anchor, 'href', value);
            collapseSelectionToEnd(editor);
            formApi.hide();
          }
        }
      },

const safeDestroy = (x: any) => Option.from(x).each((x) => x.destroy());

  return (pos: CaretPosition) => Option.from(getChildNodeAtRelativeOffset(before ? 0 : -1, pos)).filter(predicate).isSome();
};

return (api) => {
      const data = api.getData();
      callback(Option.from(data.colorpicker));
      api.close();
    };
  };

const getMinWidthSetting = (editor): Option => Option.from(editor.settings.min_width).filter(Type.isNumber);
const getMinHeightSetting = (editor): Option => Option.from(editor.settings.min_height).filter(Type.isNumber);

const fixedToolbarAnchor = (): AnchorSpec => ({
    anchor: 'node',
    root: bodyElement(),
    node: Option.from(bodyElement()),
    layouts: {
      onRtl: () => [ LayoutInside.north ],
      onLtr: () => [ LayoutInside.north ]
    }
  });

}).orThunk(() => {
      if (isSystemFontStack(font)) {
        return Option.from({
          title: 'System Font',
          format: font
        });
      } else {
        return Option.none();
      }
    });