@empoleon/tiptap/esm/RichTextEditorControl/RichTextEditorControl.mjs

Rich text editor based on tiptap

import { createComponent, mergeProps, Dynamic } from 'solid-js/web';
import { factory, useProps, UnstyledButton } from '@empoleon/core';
import { useRichTextEditorContext } from '../RichTextEditor.context.mjs';
import classes from '../RichTextEditor.module.css.mjs';
import { splitProps, createMemo } from 'solid-js';

const defaultProps = {
  interactive: true
};
const RichTextEditorControl = factory(_props => {
  const props = useProps("RichTextEditorControl", defaultProps, _props);
  const [local, others] = splitProps(props, ["classNames", "className", "style", "styles", "vars", "interactive", "active", "onMouseDown", "disabled", "ref"]);
  const ctx = useRichTextEditorContext();
  return createComponent(UnstyledButton, mergeProps(others, () => ctx.getStyles("control", {
    className: local.className,
    style: local.style,
    classNames: local.classNames,
    styles: local.styles
  }), {
    get disabled() {
      return local.disabled;
    },
    "data-rich-text-editor-control": true,
    get tabIndex() {
      return local.interactive ? 0 : -1;
    },
    get ["data-interactive"]() {
      return local.interactive || void 0;
    },
    get ["data-disabled"]() {
      return local.disabled || void 0;
    },
    get ["data-active"]() {
      return local.active || void 0;
    },
    get ["aria-pressed"]() {
      return local.active && local.interactive || void 0;
    },
    get ["aria-hidden"]() {
      return !local.interactive || void 0;
    },
    ref(r$) {
      var _ref$ = local.ref;
      typeof _ref$ === "function" ? _ref$(r$) : local.ref = r$;
    },
    get unstyled() {
      return ctx.unstyled;
    },
    get variant() {
      return ctx.variant || "default";
    },
    onMouseDown: event => {
      event.preventDefault();
      typeof local.onMouseDown === "function" && local.onMouseDown?.(event);
    }
  }));
});
RichTextEditorControl.classes = classes;
RichTextEditorControl.displayName = "@empoleon/tiptap/RichTextEditorControl";
const RichTextEditorControlBase = props => {
  const [local, others] = splitProps(props, ["className", "icon"]);
  const ctx = useRichTextEditorContext();
  return createComponent(RichTextEditorControl, mergeProps(others, {
    get children() {
      return createComponent(Dynamic, mergeProps({
        get component() {
          return local.icon;
        }
      }, () => ctx.getStyles("controlIcon")));
    }
  }));
};
RichTextEditorControlBase.displayName = "@empoleon/tiptap/RichTextEditorControlBase";
function createControl(config) {
  const Control = props => {
    const context = useRichTextEditorContext();
    const _label = () => context.labels[config.label];
    const active = createMemo(() => config.isActive?.name ? context.editor?.isActive(config.isActive.name, config.isActive.attributes) : false);
    const disabled = createMemo(() => config.isDisabled?.(context.editor) || false);
    const handleClick = () => {
      context.editor?.chain().focus()[config.operation.name](config.operation.attributes).run();
    };
    return createComponent(RichTextEditorControlBase, mergeProps(props, {
      get ["aria-label"]() {
        return _label();
      },
      get title() {
        return _label();
      },
      get active() {
        return active();
      },
      onClick: handleClick,
      get icon() {
        return props.icon || config.icon;
      },
      get disabled() {
        return disabled();
      }
    }));
  };
  Control.displayName = `@empoleon/tiptap/${config.label}`;
  return Control;
}

export { RichTextEditorControl, RichTextEditorControlBase, createControl };
//# sourceMappingURL=RichTextEditorControl.mjs.map