@empoleon/tiptap/cjs/RichTextEditorControl/RichTextEditorControl.cjs

Rich text editor based on tiptap

'use strict';

var web = require('solid-js/web');
var core = require('@empoleon/core');
var RichTextEditor_context = require('../RichTextEditor.context.cjs');
var RichTextEditor_module = require('../RichTextEditor.module.css.cjs');
var solidJs = require('solid-js');

const defaultProps = {
  interactive: true
};
const RichTextEditorControl = core.factory(_props => {
  const props = core.useProps("RichTextEditorControl", defaultProps, _props);
  const [local, others] = solidJs.splitProps(props, ["classNames", "className", "style", "styles", "vars", "interactive", "active", "onMouseDown", "disabled", "ref"]);
  const ctx = RichTextEditor_context.useRichTextEditorContext();
  return web.createComponent(core.UnstyledButton, web.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 = RichTextEditor_module;
RichTextEditorControl.displayName = "@empoleon/tiptap/RichTextEditorControl";
const RichTextEditorControlBase = props => {
  const [local, others] = solidJs.splitProps(props, ["className", "icon"]);
  const ctx = RichTextEditor_context.useRichTextEditorContext();
  return web.createComponent(RichTextEditorControl, web.mergeProps(others, {
    get children() {
      return web.createComponent(web.Dynamic, web.mergeProps({
        get component() {
          return local.icon;
        }
      }, () => ctx.getStyles("controlIcon")));
    }
  }));
};
RichTextEditorControlBase.displayName = "@empoleon/tiptap/RichTextEditorControlBase";
function createControl(config) {
  const Control = props => {
    const context = RichTextEditor_context.useRichTextEditorContext();
    const _label = () => context.labels[config.label];
    const active = solidJs.createMemo(() => config.isActive?.name ? context.editor?.isActive(config.isActive.name, config.isActive.attributes) : false);
    const disabled = solidJs.createMemo(() => config.isDisabled?.(context.editor) || false);
    const handleClick = () => {
      context.editor?.chain().focus()[config.operation.name](config.operation.attributes).run();
    };
    return web.createComponent(RichTextEditorControlBase, web.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;
}

exports.RichTextEditorControl = RichTextEditorControl;
exports.RichTextEditorControlBase = RichTextEditorControlBase;
exports.createControl = createControl;
//# sourceMappingURL=RichTextEditorControl.cjs.map