@fastkit/vui-wysiwyg 0.0.1

package/dist/vui-wysiwyg.mjs

@@ -0,0 +1,924 @@
+import { defineComponent, ref, computed, watch, onBeforeUnmount, createVNode, mergeProps, createTextVNode, isVNode } from 'vue';
+import { Extension, useEditor, EditorContent, BubbleMenu } from '@tiptap/vue-3';
+import { Decoration, DecorationSet } from '@tiptap/pm/view';
+import { Plugin, PluginKey, TextSelection } from '@tiptap/pm/state';
+import TextStyle from '@tiptap/extension-text-style';
+import { BulletList } from '@tiptap/extension-bullet-list';
+import { Bold } from '@tiptap/extension-bold';
+import { Italic } from '@tiptap/extension-italic';
+import { Underline } from '@tiptap/extension-underline';
+import { History } from '@tiptap/extension-history';
+import { Link } from '@tiptap/extension-link';
+import { createTextableProps, createFormControlProps, createControlFieldProps, createControlFieldProviderProps, createControlProps, defineSlotsProps, createTextableEmits, useVui, useControl, useControlField, TextableControl, VFormControl, VControlField, VTextCounter, validateIf, url, VButtonGroup, VButton, VIcon } from '@fastkit/vui';
+import { OrderedList } from '@tiptap/extension-ordered-list';
+import { StarterKit } from '@tiptap/starter-kit';
+
+// src/schemes.ts
+var EDITOR_EVENTS = [
+  "beforeCreate",
+  "create",
+  "update",
+  "selectionUpdate",
+  "transaction",
+  "focus",
+  "blur",
+  "destroy"
+];
+var prefixedEventName = (source) => {
+  return `on${source.charAt(0).toUpperCase()}${source.slice(1)}`;
+};
+var WysiwygEditorInitializeContext = class {
+  listeners = {};
+  _vui;
+  get vui() {
+    return this._vui();
+  }
+  constructor(vuiGetter, opts = {}) {
+    this._vui = vuiGetter;
+    EDITOR_EVENTS.forEach((event) => {
+      this.listeners[event] = [];
+      const prefixed = prefixedEventName(event);
+      const fn = opts[prefixed];
+      fn && this.listeners[event].push(fn);
+    });
+  }
+  on(ev, handler) {
+    this.listeners[ev].push(handler);
+    return () => this.off(ev, handler);
+  }
+  off(ev, handler) {
+    this.listeners[ev] = this.listeners[ev].filter(
+      (_handler) => _handler !== handler
+    );
+  }
+  editorOptions() {
+    const opts = {};
+    EDITOR_EVENTS.forEach((event) => {
+      const prefixed = prefixedEventName(event);
+      opts[prefixed] = (props) => {
+        const handlers = this.listeners[event];
+        handlers.forEach((handler) => {
+          handler(props);
+        });
+      };
+    });
+    return opts;
+  }
+};
+function isCreatedWysiwygExtension(source) {
+  return !!source && typeof source === "object" && source.__isCreatedWysiwygExtension === true;
+}
+function createWysiwygExtension(extension) {
+  const ext = {
+    __isCreatedWysiwygExtension: true,
+    _configs: [],
+    configure: (opts) => {
+      opts && ext._configs.push(opts);
+      return ext;
+    },
+    raw: extension
+  };
+  return ext;
+}
+function resolveRawWysiwygExtension(raw, ctx) {
+  if (isCreatedWysiwygExtension(raw)) {
+    const { raw: _raw, _configs } = raw;
+    let ext = typeof _raw === "function" ? _raw(ctx) : _raw;
+    _configs.forEach((config) => {
+      ext = ext.configure(config);
+    });
+    return ext;
+  }
+  return typeof raw === "function" ? raw(ctx) : raw;
+}
+function resolveRawWysiwygExtensions(raws, ctx) {
+  return raws.map((raw) => resolveRawWysiwygExtension(raw, ctx));
+}
+function resolveRawWysiwygEditorTool(raw, vui) {
+  return typeof raw === "function" ? raw(vui) : raw;
+}
+function resolveRawWysiwygEditorTools(rawTools, vui) {
+  const tools = [];
+  const extensions = [];
+  rawTools.forEach((raw) => {
+    let resolved = resolveRawWysiwygEditorTool(raw, vui);
+    if (!Array.isArray(resolved)) {
+      resolved = [resolved];
+    }
+    resolved.forEach((tool) => {
+      tools.push(tool);
+      if (tool.extensions) {
+        extensions.push(...tool.extensions);
+      }
+    });
+  });
+  return {
+    tools,
+    extensions
+  };
+}
+
+// src/injections.ts
+var VUI_WYSIWYG_EDITOR_SYMBOL = "vui-wysiwyg-editor";
+var PROBLEM_CLASS_NAME = "v-linter__problem";
+var ISSUE_ICON_CLASS_NAME = "v-linter__issue-icon";
+var ISSUE_DATASET_NAME = "data-issue-id";
+function resolveWysiwygLinterFixMessage(message) {
+  return typeof message === "function" ? message() : message;
+}
+function renderIcon(view, issue) {
+  const {
+    level = "warning"
+  } = issue;
+  const icon = document.createElement("div");
+  const message = resolveWysiwygLinterFixMessage(issue.message);
+  icon.className = `${ISSUE_ICON_CLASS_NAME} ${level}-scope`;
+  icon.setAttribute(ISSUE_DATASET_NAME, issue.id);
+  if (typeof message === "string") {
+    icon.title = message;
+  }
+  return icon;
+}
+function runAllLinterPlugins(doc, plugins) {
+  const decorations = [];
+  const issues = plugins.map((RegisteredLinterPlugin) => {
+    return new RegisteredLinterPlugin(doc).scan().getResults();
+  }).flat();
+  issues.forEach((issue) => {
+    const {
+      level = "warning",
+      icon
+    } = issue;
+    const message = resolveWysiwygLinterFixMessage(issue.message);
+    decorations.push(Decoration.inline(issue.from, issue.to, {
+      class: `${PROBLEM_CLASS_NAME} ${level}-scope`,
+      "data-issue-id": issue.id,
+      title: typeof message === "string" ? message : void 0
+    }));
+    if (icon) {
+      decorations.push(Decoration.widget(issue.from, (view) => renderIcon(view, issue)));
+    }
+  });
+  const decorationSet = DecorationSet.create(doc, decorations);
+  return {
+    issues,
+    decorationSet
+  };
+}
+var WysiwygLinter = createWysiwygExtension((ctx) => {
+  function showMenu(view, issue, event) {
+    const message = resolveWysiwygLinterFixMessage(issue.message);
+    const variant = ctx.vui.setting("containedVariant");
+    const scope = ctx.vui.setting(`${issue.level}Scope`);
+    return ctx.vui.menu({
+      activator: event,
+      content: (stack) => createVNode("div", {
+        "class": "v-linter__issue-menu__body"
+      }, [createVNode("div", {
+        "class": ["v-linter__issue-menu__message", `${scope}-scope ${variant}`]
+      }, [message]), issue.fix.length && createVNode("div", {
+        "class": "v-linter__issue-menu__fixers"
+      }, [issue.fix.map((fixer, index) => createVNode("div", {
+        "key": index,
+        "class": "v-linter__issue-menu__fixer"
+      }, [createVNode("button", {
+        "type": "button",
+        "class": "v-linter__issue-menu__fixer__button",
+        "onClick": () => {
+          stack.close();
+          fixer.handler(view, issue);
+        }
+      }, [createVNode("span", {
+        "class": "v-linter__issue-menu__fixer__button__message"
+      }, [resolveWysiwygLinterFixMessage(fixer.message)])])]))])])
+    });
+  }
+  return Extension.create({
+    name: "linter",
+    addOptions() {
+      return {
+        plugins: []
+      };
+    },
+    addStorage() {
+      return {
+        issues: []
+      };
+    },
+    addProseMirrorPlugins() {
+      const {
+        plugins
+      } = this.options;
+      const {
+        storage
+      } = this;
+      const runAll = (doc) => {
+        const {
+          issues,
+          decorationSet
+        } = runAllLinterPlugins(doc, plugins);
+        storage.issues = issues;
+        return decorationSet;
+      };
+      const getIssue = (id) => storage.issues.find((issue) => issue.id === id);
+      const getIssueElementByEvent = (source) => {
+        if (!source || !(source instanceof HTMLElement)) {
+          return;
+        }
+        const issueId = source.getAttribute(ISSUE_DATASET_NAME);
+        const issue = issueId && getIssue(issueId);
+        if (!issue)
+          return;
+        return {
+          issue
+        };
+      };
+      const linterPlugin = new Plugin({
+        key: new PluginKey("linter"),
+        state: {
+          init(_, {
+            doc
+          }) {
+            return runAll(doc);
+          },
+          apply(transaction, oldState) {
+            return transaction.docChanged ? runAll(transaction.doc) : oldState;
+          }
+        },
+        props: {
+          decorations(state) {
+            return linterPlugin.getState(state);
+          },
+          handleClick(view, _, event) {
+            const info = getIssueElementByEvent(event.target);
+            if (!info) {
+              return false;
+            }
+            const {
+              issue
+            } = info;
+            const {
+              from,
+              to
+            } = issue;
+            const focus = () => view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, from, to)).scrollIntoView());
+            focus();
+            showMenu(view, issue, event);
+            return true;
+          }
+        }
+      });
+      return [linterPlugin];
+    }
+  });
+});
+
+// src/extensions/linter/utils.ts
+var IDX = 256;
+var BUFFER;
+var HEX = [];
+while (IDX--)
+  HEX[IDX] = (IDX + 256).toString(16).substring(1);
+function cheepUUID() {
+  let i = 0, num, out = "";
+  if (!BUFFER || IDX + 16 > 256) {
+    BUFFER = Array(i = 256);
+    while (i--)
+      BUFFER[i] = 256 * Math.random() | 0;
+    i = IDX = 0;
+  }
+  for (; i < 16; i++) {
+    num = BUFFER[IDX + i];
+    if (i == 6)
+      out += HEX[num & 15 | 64];
+    else if (i == 8)
+      out += HEX[num & 63 | 128];
+    else
+      out += HEX[num];
+    if (i & 1 && i > 1 && i < 11)
+      out += "-";
+  }
+  IDX++;
+  return out;
+}
+
+// src/extensions/linter/LinterPlugin.ts
+var WysiwygLinterPlugin = class {
+  doc;
+  results = [];
+  constructor(doc) {
+    this.doc = doc;
+  }
+  record(result) {
+    const { fix = [], icon = false } = result;
+    this.results.push({
+      level: "error",
+      id: cheepUUID(),
+      ...result,
+      fix: Array.isArray(fix) ? fix : [fix],
+      icon
+    });
+  }
+  scan() {
+    return this;
+  }
+  getResults() {
+    return this.results;
+  }
+};
+function WysiwygLinterBadWords(words) {
+  const regex = new RegExp(`\\b(${words.join("|")})\\b`);
+  return class WysiwygLinterBadWords extends WysiwygLinterPlugin {
+    scan() {
+      this.doc.descendants((node, position) => {
+        if (!node.isText) {
+          return;
+        }
+        const matches = regex.exec(node.text);
+        if (matches) {
+          const fixValue = matches[0] + "!!!!!";
+          this.record({
+            level: "warning",
+            message: `Try not to say '${matches[0]}'`,
+            from: position + matches.index,
+            to: position + matches.index + matches[0].length,
+            fix: [{
+              message: () => createVNode("span", null, [createVNode("code", null, [fixValue]), createTextVNode("\u306B\u4FEE\u6B63\u3059\u308B\u3002")]),
+              handler: () => {
+                console.log("hoge");
+              }
+            }, {
+              message: "\u3069\u3046\u306B\u304B\u3059\u308B",
+              handler: () => {
+                console.log("hoge");
+              }
+            }]
+          });
+        }
+      });
+      return this;
+    }
+  };
+}
+
+// src/extensions/linter/plugins/HeadingLevel.ts
+var WysiwygLinterHeadingLevel = class extends WysiwygLinterPlugin {
+  fixHeader(level) {
+    return function({ state, dispatch }, issue) {
+      dispatch(state.tr.setNodeMarkup(issue.from - 1, void 0, { level }));
+    };
+  }
+  scan() {
+    let lastHeadLevel = null;
+    this.doc.descendants((node, position) => {
+      if (node.type.name === "heading") {
+        const { level } = node.attrs;
+        if (lastHeadLevel != null && level > lastHeadLevel + 1) {
+          this.record({
+            message: `Heading too small (${level} under ${lastHeadLevel})`,
+            from: position + 1,
+            to: position + 1 + node.content.size,
+            fix: {
+              message: "\u4FEE\u6B63\u3059\u308B",
+              handler: this.fixHeader(lastHeadLevel + 1)
+            }
+          });
+        }
+        lastHeadLevel = level;
+      }
+    });
+    return this;
+  }
+};
+
+// src/extensions/linter/plugins/Punctuation.ts
+var WysiwygLinterPunctuation = class extends WysiwygLinterPlugin {
+  regex = / ([,.!?:]) ?/g;
+  fix(replacement) {
+    return function({ state, dispatch }, issue) {
+      dispatch(
+        state.tr.replaceWith(
+          issue.from,
+          issue.to,
+          state.schema.text(replacement)
+        )
+      );
+    };
+  }
+  scan() {
+    this.doc.descendants((node, position) => {
+      if (!node.isText) {
+        return;
+      }
+      if (!node.text) {
+        return;
+      }
+      const matches = this.regex.exec(node.text);
+      if (matches) {
+        this.record({
+          message: "Suspicious spacing around punctuation",
+          from: position + matches.index,
+          to: position + matches.index + matches[0].length,
+          fix: {
+            message: "Fix it!!!",
+            handler: this.fix(`${matches[1]} `)
+          }
+        });
+      }
+    });
+    return this;
+  }
+};
+var WysiwygColorExtension = Extension.create({
+  name: "color",
+  addOptions() {
+    return {
+      types: ["textStyle"]
+    };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          color: {
+            default: null,
+            parseHTML: (element) => element.style.color.replace(/['"]+/g, ""),
+            renderHTML: (attributes) => {
+              if (!attributes.color) {
+                return {};
+              }
+              return {
+                style: `color: ${attributes.color}`
+              };
+            }
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setColor: (color) => ({ chain }) => {
+        return chain().setMark("textStyle", { color }).run();
+      },
+      unsetColor: () => ({ chain }) => {
+        return chain().setMark("textStyle", { color: null }).removeEmptyTextStyle().run();
+      }
+    };
+  }
+});
+var WysiwygBulletListTool = (vui, options) => {
+  const tool = {
+    key: "bulletList",
+    icon: vui.icon("editorformatListBulleted"),
+    active: ({ editor }) => editor.isActive("bulletList"),
+    onClick: ({ editor }) => {
+      editor.chain().focus().toggleBulletList().run();
+    },
+    floating: true,
+    extensions: [BulletList.configure(options)]
+  };
+  return tool;
+};
+var WysiwygFormatBoldTool = (vui, options) => {
+  const tool = {
+    key: "formatBold",
+    icon: vui.icon("editorformatBold"),
+    active: ({ editor }) => editor.isActive("bold"),
+    onClick: ({ editor }) => {
+      editor.chain().focus().toggleBold().run();
+    },
+    floating: true,
+    extensions: [Bold.configure(options)]
+  };
+  return tool;
+};
+var WysiwygFormatItalicTool = (vui, options) => {
+  const tool = {
+    key: "formatItalic",
+    icon: vui.icon("editorformatItalic"),
+    active: ({ editor }) => editor.isActive("italic"),
+    onClick: ({ editor }) => {
+      editor.chain().focus().toggleItalic().run();
+    },
+    floating: true,
+    extensions: [Italic.configure(options)]
+  };
+  return tool;
+};
+var WysiwygFormatUnderlineTool = (vui, options) => {
+  const tool = {
+    key: "formatUnderline",
+    icon: vui.icon("editorformatUnderline"),
+    active: ({ editor }) => editor.isActive("underline"),
+    onClick: ({ editor }) => {
+      editor.chain().focus().toggleUnderline().run();
+    },
+    floating: true,
+    extensions: [Underline.configure(options)]
+  };
+  return tool;
+};
+var WysiwygHistoryTool = (vui, options) => {
+  const undo = {
+    key: "history-undo",
+    icon: vui.icon("editorUndo"),
+    disabled: ({ editor }) => !editor.can().undo(),
+    onClick: ({ editor }) => {
+      editor.chain().focus().undo().run();
+    },
+    extensions: [History.configure(options)]
+  };
+  const redo = {
+    key: "history-redo",
+    icon: vui.icon("editorRedo"),
+    disabled: ({ editor }) => !editor.can().redo(),
+    onClick: ({ editor }) => {
+      editor.chain().focus().redo().run();
+    }
+  };
+  return [undo, redo];
+};
+var WysiwygLinkTool = (vui, options) => {
+  const tool = {
+    key: "link",
+    // icon: ({ editor }) => {
+    //   return vui.icon(editor.isActive('link') ? 'editorLinkOff' : 'editorLink');
+    // },
+    icon: vui.icon("editorLink"),
+    active: ({ editor }) => editor.isActive("link"),
+    // disabled: ({ editor }) => {
+    //   const { $from, $to } = editor.view.state.selection;
+    //   return $to.pos - $from.pos === 0;
+    // },
+    onClick: async ({ vui: vui2, editor }) => {
+      const { href = "" } = editor.getAttributes("link");
+      const result = await vui2.prompt({
+        input: {
+          label: "Link URL",
+          rules: [validateIf, url],
+          initialValue: href,
+          size: "sm",
+          autofocus: true
+        }
+      });
+      if (result === void 0 || result === false) {
+        return;
+      }
+      const range = editor.chain().focus().extendMarkRange("link");
+      if (!result) {
+        range.unsetLink().run();
+      } else {
+        range.setLink({
+          href: result
+        }).run();
+      }
+    },
+    floating: true,
+    extensions: [
+      Link.configure({
+        openOnClick: false,
+        ...options
+      })
+    ]
+  };
+  return tool;
+};
+var WysiwygOrderedListTool = (vui, options) => {
+  const tool = {
+    key: "orderedList",
+    icon: vui.icon("editorformatListNumbered"),
+    active: ({ editor }) => editor.isActive("orderedList"),
+    onClick: ({ editor }) => {
+      editor.chain().focus().toggleOrderedList().run();
+    },
+    floating: true,
+    extensions: [OrderedList.configure(options)]
+  };
+  return tool;
+};
+function createWysiwygColorTool(opts) {
+  const WysiwygColorTool = (vui) => {
+    const tool = {
+      key: "textColor",
+      // active: ({ editor }) => editor.isActive('textStyle'),
+      icon: ({
+        editor
+      }) => () => {
+        const color = editor.getAttributes("textStyle").color;
+        const style = {
+          color
+        };
+        return createVNode("span", {
+          "class": "v-wysiwyg-color-tool__button"
+        }, [createVNode(VIcon, {
+          "class": "v-wysiwyg-color-tool__button__icon",
+          "name": vui.icon("editorTextColor")
+        }, null), createVNode("span", {
+          "class": "v-wysiwyg-color-tool__button__bar",
+          "style": style
+        }, null)]);
+      },
+      onClick: (ctx, ev) => {
+        ctx.vui.menu({
+          class: "v-wysiwyg-color-tool__menu",
+          activator: ev,
+          content: (stack) => createVNode("div", {
+            "class": ["v-wysiwyg-color-tool__items", {
+              "v-wysiwyg-color-tool__items--with-label": opts.withLabel
+            }]
+          }, [opts.items.map((item, index) => createVNode("button", {
+            "key": item.key == null ? index : item.key,
+            "class": "v-wysiwyg-color-tool__item",
+            "type": "button",
+            "onClick": () => {
+              const {
+                color
+              } = item;
+              let command = ctx.editor.chain().focus();
+              if (color) {
+                command = command.setColor(color);
+              } else {
+                command = command.unsetColor();
+              }
+              command.run();
+              stack.close();
+            }
+          }, [createVNode("span", {
+            "class": "v-wysiwyg-color-tool__item__color",
+            "style": item.color ? {
+              color: item.color
+            } : {}
+          }, null), opts.withLabel && createVNode("span", {
+            "class": "v-wysiwyg-color-tool__item__name"
+          }, [item.name])]))])
+        });
+      },
+      floating: true,
+      extensions: [TextStyle, WysiwygColorExtension]
+    };
+    return tool;
+  };
+  return WysiwygColorTool;
+}
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var VWysiwygEditor = defineComponent({
+  name: "VWysiwygEditor",
+  props: {
+    ...createTextableProps(),
+    ...createFormControlProps(),
+    ...createControlFieldProps(),
+    ...createControlFieldProviderProps(),
+    ...createControlProps(),
+    ...defineSlotsProps(),
+    extensions: {
+      type: Array,
+      default: () => []
+    },
+    tools: {
+      type: Array,
+      default: () => []
+    },
+    floatingToolbar: Boolean,
+    disabledMinHeight: Boolean,
+    disabledMaxHeight: Boolean
+  },
+  emits: {
+    ...createTextableEmits()
+  },
+  setup(props, ctx) {
+    const vui = useVui();
+    const textRef = ref("");
+    const toolButtonActiveColor = vui.setting("primaryScope");
+    const wysiwygSettings = computed(() => resolveRawWysiwygEditorTools(props.tools, vui));
+    const control = useControl(props);
+    useControlField(props);
+    const inputControl = new TextableControl(props, ctx, {
+      nodeType: VUI_WYSIWYG_EDITOR_SYMBOL,
+      validationValue: () => textRef.value
+    });
+    const initializeCtx = new WysiwygEditorInitializeContext(() => vui, {
+      onCreate: ({
+        editor: editor2
+      }) => {
+        textRef.value = editor2.getText();
+        updateEditable();
+      },
+      onFocus: ({
+        event
+      }) => {
+        inputControl.focusHandler(event);
+      },
+      onBlur: ({
+        event
+      }) => {
+        inputControl.blurHandler(event);
+      },
+      onUpdate: ({
+        editor: editor2
+      }) => {
+        inputControl.value = editor2.getHTML();
+        textRef.value = editor2.getText();
+      }
+    });
+    const extensions = [
+      StarterKit.configure({
+        bold: false,
+        bulletList: false,
+        orderedList: false,
+        history: false,
+        italic: false
+      }),
+      // Linter.configure({
+      //   plugins: [BadWords(['abc', 'evidently']), Punctuation, HeadingLevel],
+      // }),
+      ...resolveRawWysiwygExtensions(props.extensions, initializeCtx),
+      ...wysiwygSettings.value.extensions
+    ];
+    const updateEditable = () => {
+      if (!editor.value)
+        return;
+      editor.value.setEditable(inputControl.canOperation);
+    };
+    watch(() => inputControl.canOperation, updateEditable);
+    watch(() => props.modelValue, (modelValue) => {
+      const $editor = editor.value;
+      if (!$editor || $editor.getHTML() === modelValue)
+        return;
+      $editor.commands.setContent(modelValue == null ? "" : modelValue, false);
+      textRef.value = $editor.getText();
+    });
+    initializeCtx.on("create", ({
+      editor: editor2
+    }) => {
+      textRef.value = editor2.getText();
+      updateEditable();
+    });
+    const editor = useEditor({
+      ...initializeCtx.editorOptions(),
+      autofocus: props.autofocus,
+      content: props.modelValue,
+      extensions,
+      editorProps: {
+        attributes: {
+          class: "v-wysiwyg-editor__input__prose"
+        }
+      }
+    });
+    const focus = (position, options) => {
+      if (!editor.value)
+        return;
+      return editor.value.chain().focus(position, options);
+    };
+    const blur = () => {
+      if (!editor.value)
+        return;
+      return editor.value.chain().blur();
+    };
+    const wysiwygContext = computed(() => {
+      const _editor = editor.value;
+      return {
+        vui,
+        editor: _editor
+      };
+    });
+    const createTools = (bubbleMenu = false) => {
+      let _slot;
+      const {
+        value: settings
+      } = wysiwygSettings;
+      const {
+        value: context
+      } = wysiwygContext;
+      const tools = bubbleMenu ? settings.tools.filter((t) => !!t.floating) : settings.tools;
+      const _editor = editor.value;
+      const variant = vui.setting(bubbleMenu ? "containedVariant" : "plainVariant");
+      return createVNode(VButtonGroup, {
+        "class": ["v-wysiwyg-editor__toolbar", {
+          "v-wysiwyg-editor__floating-toolbar": props.floatingToolbar
+        }],
+        "variant": variant
+      }, _isSlot(_slot = tools.map(({
+        key,
+        icon,
+        onClick,
+        disabled,
+        active
+      }) => {
+        const isActive = !!_editor && resolveContextableValue(context, active);
+        const isDisabled = !inputControl.canOperation || !!_editor && resolveContextableValue(context, disabled);
+        let iconName;
+        let child;
+        if (typeof icon === "function") {
+          if (_editor) {
+            const _child = icon(context);
+            if (typeof _child === "function") {
+              child = _child();
+            } else {
+              iconName = _child;
+            }
+          }
+        } else {
+          iconName = icon;
+        }
+        if (!iconName && child == null)
+          return;
+        return createVNode(VButton, {
+          "tabindex": -1,
+          "key": key,
+          "icon": iconName,
+          "onClick": (ev) => onClick(context, ev),
+          "color": isActive ? toolButtonActiveColor : void 0,
+          "disabled": isDisabled
+        }, _isSlot(child) ? child : {
+          default: () => [child]
+        });
+      })) ? _slot : {
+        default: () => [_slot]
+      });
+    };
+    onBeforeUnmount(() => {
+      editor.value && editor.value.destroy();
+    });
+    return {
+      editor,
+      ...inputControl.expose(),
+      ...control,
+      focus,
+      blur,
+      createTools
+    };
+  },
+  render() {
+    return createVNode(VFormControl, {
+      "nodeControl": this.nodeControl,
+      "focused": this.nodeControl.focused,
+      "class": ["v-wysiwyg-editor", this.classes, `v-wysiwyg-editor--${this.size}`, {
+        "v-wysiwyg-editor--disabled-min-heihgt": this.disabledMinHeight,
+        "v-wysiwyg-editor--disabled-max-heihgt": this.disabledMaxHeight
+      }],
+      "label": this.label,
+      "hint": this.hint,
+      "hinttip": this.hinttip,
+      "hiddenInfo": this.hiddenInfo,
+      "requiredChip": this.requiredChip,
+      "onClickLabel": (ev) => {
+        this.focus("start", {
+          scrollIntoView: true
+        });
+      }
+    }, {
+      ...this.$slots,
+      default: () => {
+        const {
+          editor
+        } = this;
+        return createVNode("div", {
+          "class": "v-wysiwyg-editor__wrapper"
+        }, [!this.isReadonly && this.createTools(), createVNode(VControlField, {
+          "class": "v-wysiwyg-editor__input",
+          "autoHeight": true,
+          "startAdornment": this.startAdornment,
+          "endAdornment": this.endAdornment,
+          "size": this.size
+        }, {
+          ...this.$slots,
+          default: () => {
+            let _slot2;
+            return createVNode("div", {
+              "class": "v-wysiwyg-editor__body"
+            }, [createVNode(EditorContent, mergeProps({
+              class: "v-wysiwyg-editor__input__element wysiwyg"
+            }, {
+              "editor": editor
+            }), null), !this.floatingToolbar && !!editor && !this.isReadonly && createVNode(BubbleMenu, mergeProps({
+              class: "v-wysiwyg-editor__bubble-menu"
+            }, {
+              "editor": editor
+            }), _isSlot(_slot2 = this.createTools(true)) ? _slot2 : {
+              default: () => [_slot2]
+            })]);
+          }
+        })]);
+      },
+      infoAppends: () => {
+        const {
+          counterResult
+        } = this;
+        if (!counterResult)
+          return;
+        return createVNode(VTextCounter, counterResult, null);
+      }
+    });
+  }
+});
+function resolveContextableValue(ctx, source) {
+  return typeof source === "function" ? source(ctx) : source;
+}
+
+export { VUI_WYSIWYG_EDITOR_SYMBOL, VWysiwygEditor, WysiwygBulletListTool, WysiwygColorExtension, WysiwygEditorInitializeContext, WysiwygFormatBoldTool, WysiwygFormatItalicTool, WysiwygFormatUnderlineTool, WysiwygHistoryTool, WysiwygLinkTool, WysiwygLinter, WysiwygLinterBadWords, WysiwygLinterHeadingLevel, WysiwygLinterPlugin, WysiwygLinterPunctuation, WysiwygOrderedListTool, createWysiwygColorTool, createWysiwygExtension, resolveRawWysiwygEditorTools, resolveRawWysiwygExtensions };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=vui-wysiwyg.mjs.map