@fastkit/vui-wysiwyg 8.2.0 → 8.3.0-next.0

package/dist/vui-wysiwyg.mjs

@@ -1,1049 +1,927 @@
-import { defineComponent, ref, computed, watch, onBeforeUnmount, createVNode, isVNode, createTextVNode } from 'vue';
-import { Extension, useEditor, EditorContent, Mark, mergeAttributes } 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 { defineSlots, createTextableEmits, createControlProps, createControlFieldProviderProps, createControlFieldProps, createFormNodeWrapperProps, createTextableProps, useVui, useControl, useControlField, TextableControl, VFormControl, withCtx, VTextCounter, VControlField, VButtonGroup, VButton, validateIf, url, VIcon } from '@fastkit/vui';
-import { OrderedList } from '@tiptap/extension-ordered-list';
-import { TextAlign } from '@tiptap/extension-text-align';
-import { BubbleMenu } from '@tiptap/vue-3/menus';
-import { StarterKit } from '@tiptap/starter-kit';
+import { computed, createTextVNode, createVNode, defineComponent, isVNode, onBeforeUnmount, ref, watch } from "vue";
+import { EditorContent, Extension, Mark, mergeAttributes, useEditor } 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 { TextableControl, VButton, VButtonGroup, VControlField, VFormControl, VIcon, VTextCounter, createControlFieldProps, createControlFieldProviderProps, createControlProps, createFormNodeWrapperProps, createTextableEmits, createTextableProps, defineSlots, url, useControl, useControlField, useVui, validateIf, withCtx } from "@fastkit/vui";
+import { OrderedList } from "@tiptap/extension-ordered-list";
+import { TextAlign } from "@tiptap/extension-text-align";
+import { BubbleMenu } from "@tiptap/vue-3/menus";
+import { StarterKit } from "@tiptap/starter-kit";
 
-// src/schemes.ts
-var EDITOR_EVENTS = [
-  "beforeCreate",
-  "create",
-  "update",
-  "selectionUpdate",
-  "transaction",
-  "focus",
-  "blur",
-  "destroy"
+//#region src/schemes.ts
+const EDITOR_EVENTS = [
+	"beforeCreate",
+	"create",
+	"update",
+	"selectionUpdate",
+	"transaction",
+	"focus",
+	"blur",
+	"destroy"
 ];
-var prefixedEventName = (source) => `on${source.charAt(0).toUpperCase()}${source.slice(1)}`;
+const prefixedEventName = (source) => `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;
-  }
+	listeners = {};
+	_vui;
+	get vui() {
+		return this._vui();
+	}
+	constructor(vuiGetter, opts = {}) {
+		this._vui = vuiGetter;
+		EDITOR_EVENTS.forEach((event) => {
+			this.listeners[event] = [];
+			const fn = opts[prefixedEventName(event)];
+			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) => {
+				this.listeners[event].forEach((handler) => {
+					handler(props);
+				});
+			};
+		});
+		return opts;
+	}
 };
 function isCreatedWysiwygExtension(source) {
-  return !!source && typeof source === "object" && source.__isCreatedWysiwygExtension === true;
+	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;
+	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;
+	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));
+	return raws.map((raw) => resolveRawWysiwygExtension(raw, ctx));
 }
 function resolveRawWysiwygEditorTool(raw, vui) {
-  return typeof raw === "function" ? raw(vui) : raw;
+	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
-  };
+	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";
+//#endregion
+//#region src/injections.ts
+const VUI_WYSIWYG_EDITOR_SYMBOL = "vui-wysiwyg-editor";
+
+//#endregion
+//#region src/extensions/linter/Linter.tsx
+const PROBLEM_CLASS_NAME = "v-linter__problem";
+const ISSUE_ICON_CLASS_NAME = "v-linter__issue-icon";
+const ISSUE_DATASET_NAME = "data-issue-id";
 function resolveWysiwygLinterFixMessage(message) {
-  return typeof message === "function" ? message() : 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;
+	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) => 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
-  };
+	const decorations = [];
+	const issues = plugins.map((RegisteredLinterPlugin) => 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)));
+	});
+	return {
+		issues,
+		decorationSet: DecorationSet.create(doc, decorations)
+	};
 }
-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];
-    }
-  });
+const 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 = [];
+//#endregion
+//#region src/extensions/linter/utils.ts
+let IDX = 256;
+let BUFFER;
+const HEX = [];
 while (IDX--) HEX[IDX] = (IDX + 256).toString(16).substring(1);
 function cheepUUID() {
-  let i = 0;
-  let num;
-  let 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;
+	let i = 0;
+	let num;
+	let 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
+//#endregion
+//#region 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;
-  }
+	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;
+	}
 };
+
+//#endregion
+//#region src/extensions/linter/plugins/BadWords.tsx
 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;
-    }
-  };
+	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("に修正する。")]),
+							handler: () => {
+								console.log("hoge");
+							}
+						}, {
+							message: "どうにかする",
+							handler: () => {
+								console.log("hoge");
+							}
+						}]
+					});
+				}
+			});
+			return this;
+		}
+	};
 }
 
-// src/extensions/linter/plugins/HeadingLevel.ts
+//#endregion
+//#region 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;
-  }
+	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: "修正する",
+						handler: this.fixHeader(lastHeadLevel + 1)
+					}
+				});
+				lastHeadLevel = level;
+			}
+		});
+		return this;
+	}
 };
 
-// src/extensions/linter/plugins/Punctuation.ts
+//#endregion
+//#region 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;
-  }
+	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 }) => chain().setMark("textStyle", { color }).run(),
-      unsetColor: () => ({ chain }) => chain().setMark("textStyle", { color: null }).removeEmptyTextStyle().run()
-    };
-  }
+
+//#endregion
+//#region src/extensions/color.ts
+const 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 }) => chain().setMark("textStyle", { color }).run(),
+			unsetColor: () => ({ chain }) => chain().setMark("textStyle", { color: null }).removeEmptyTextStyle().run()
+		};
+	}
 });
+
+//#endregion
+//#region src/extensions/custom-tag.ts
 function createWysiwygCustomTagMark(name, settings) {
-  const { tag = "span", attrs } = settings;
-  const attrEntries = attrs && Object.entries(attrs);
-  const attrNames = attrEntries && attrEntries.map(([name2]) => name2);
-  const getElementAttrs = (el) => {
-    if (!attrNames) return;
-    return el.getAttributeNames().reduce((acc, name2) => ({ ...acc, [name2]: el.getAttribute(name2) }), {});
-  };
-  const isMatchedElementAttrs = (elAttrs) => {
-    if (!attrEntries) return true;
-    return attrEntries.every(([name2, value]) => elAttrs[name2] === value);
-  };
-  return Mark.create({
-    name,
-    addOptions() {
-      return {
-        tag,
-        attrs: attrs && { ...attrs }
-      };
-    },
-    parseHTML() {
-      return [
-        {
-          tag,
-          getAttrs: (el) => {
-            if (!attrs) return null;
-            const elAttrs = getElementAttrs(el);
-            if (!elAttrs) return false;
-            return isMatchedElementAttrs(el) && null;
-          }
-        }
-      ];
-    },
-    renderHTML({ HTMLAttributes }) {
-      return [
-        tag,
-        attrs ? mergeAttributes(attrs, HTMLAttributes) : HTMLAttributes,
-        0
-      ];
-    }
-  });
+	const { tag = "span", attrs } = settings;
+	const attrEntries = attrs && Object.entries(attrs);
+	const attrNames = attrEntries && attrEntries.map(([name]) => name);
+	const getElementAttrs = (el) => {
+		if (!attrNames) return;
+		return el.getAttributeNames().reduce((acc, name) => ({
+			...acc,
+			[name]: el.getAttribute(name)
+		}), {});
+	};
+	const isMatchedElementAttrs = (elAttrs) => {
+		if (!attrEntries) return true;
+		return attrEntries.every(([name, value]) => elAttrs[name] === value);
+	};
+	return Mark.create({
+		name,
+		addOptions() {
+			return {
+				tag,
+				attrs: attrs && { ...attrs }
+			};
+		},
+		parseHTML() {
+			return [{
+				tag,
+				getAttrs: (el) => {
+					if (!attrs) return null;
+					if (!getElementAttrs(el)) return false;
+					return isMatchedElementAttrs(el) && null;
+				}
+			}];
+		},
+		renderHTML({ HTMLAttributes }) {
+			return [
+				tag,
+				attrs ? mergeAttributes(attrs, HTMLAttributes) : HTMLAttributes,
+				0
+			];
+		}
+	});
 }
-var WysiwygCustomTagExtension = Extension.create({
-  name: "custom-tag",
-  addCommands() {
-    return {
-      setCustomTag: (markName) => ({ chain }) => chain().setMark(markName).run(),
-      unsetCustomTag: (markName) => ({ chain }) => chain().unsetMark(markName).run(),
-      toggleCustomTag: (markName) => ({ chain }) => chain().toggleMark(markName).run()
-    };
-  }
+const WysiwygCustomTagExtension = Extension.create({
+	name: "custom-tag",
+	addCommands() {
+		return {
+			setCustomTag: (markName) => ({ chain }) => chain().setMark(markName).run(),
+			unsetCustomTag: (markName) => ({ chain }) => chain().unsetMark(markName).run(),
+			toggleCustomTag: (markName) => ({ chain }) => chain().toggleMark(markName).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;
+
+//#endregion
+//#region src/tools/bullet-list.ts
+const WysiwygBulletListTool = (vui, options) => {
+	return {
+		key: "bulletList",
+		icon: vui.icon("editorformatListBulleted"),
+		active: ({ editor }) => editor.isActive("bulletList"),
+		onClick: ({ editor }) => {
+			editor.chain().focus().toggleBulletList().run();
+		},
+		floating: true,
+		extensions: [BulletList.configure(options)]
+	};
 };
-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;
+
+//#endregion
+//#region src/tools/format-bold.ts
+const WysiwygFormatBoldTool = (vui, options) => {
+	return {
+		key: "formatBold",
+		icon: vui.icon("editorformatBold"),
+		active: ({ editor }) => editor.isActive("bold"),
+		onClick: ({ editor }) => {
+			editor.chain().focus().toggleBold().run();
+		},
+		floating: true,
+		extensions: [Bold.configure(options)]
+	};
 };
-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;
+
+//#endregion
+//#region src/tools/format-italic.ts
+const WysiwygFormatItalicTool = (vui, options) => {
+	return {
+		key: "formatItalic",
+		icon: vui.icon("editorformatItalic"),
+		active: ({ editor }) => editor.isActive("italic"),
+		onClick: ({ editor }) => {
+			editor.chain().focus().toggleItalic().run();
+		},
+		floating: true,
+		extensions: [Italic.configure(options)]
+	};
 };
-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;
+
+//#endregion
+//#region src/tools/format-underline.ts
+const WysiwygFormatUnderlineTool = (vui, options) => {
+	return {
+		key: "formatUnderline",
+		icon: vui.icon("editorformatUnderline"),
+		active: ({ editor }) => editor.isActive("underline"),
+		onClick: ({ editor }) => {
+			editor.chain().focus().toggleUnderline().run();
+		},
+		floating: true,
+		extensions: [Underline.configure(options)]
+	};
 };
-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];
+
+//#endregion
+//#region src/tools/history.ts
+const WysiwygHistoryTool = (vui, options) => {
+	return [{
+		key: "history-undo",
+		icon: vui.icon("editorUndo"),
+		disabled: ({ editor }) => !editor.can().undo(),
+		onClick: ({ editor }) => {
+			editor.chain().focus().undo().run();
+		},
+		extensions: [History.configure(options)]
+	}, {
+		key: "history-redo",
+		icon: vui.icon("editorRedo"),
+		disabled: ({ editor }) => !editor.can().redo(),
+		onClick: ({ editor }) => {
+			editor.chain().focus().redo().run();
+		}
+	}];
 };
-var WysiwygLinkTool = (vui, options) => {
-  const tool = {
-    key: "link",
-    icon: vui.icon("editorLink"),
-    active: ({ editor }) => editor.isActive("link"),
-    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;
+
+//#endregion
+//#region src/tools/link.ts
+const WysiwygLinkTool = (vui, options) => {
+	return {
+		key: "link",
+		icon: vui.icon("editorLink"),
+		active: ({ editor }) => editor.isActive("link"),
+		onClick: async ({ vui, editor }) => {
+			const { href = "" } = editor.getAttributes("link");
+			const result = await vui.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
+		})]
+	};
 };
-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;
+
+//#endregion
+//#region src/tools/ordered-list.ts
+const WysiwygOrderedListTool = (vui, options) => {
+	return {
+		key: "orderedList",
+		icon: vui.icon("editorformatListNumbered"),
+		active: ({ editor }) => editor.isActive("orderedList"),
+		onClick: ({ editor }) => {
+			editor.chain().focus().toggleOrderedList().run();
+		},
+		floating: true,
+		extensions: [OrderedList.configure(options)]
+	};
 };
+
+//#endregion
+//#region src/tools/color.tsx
 function createWysiwygColorTool(opts) {
-  const WysiwygColorTool = (vui) => {
-    const tool = {
-      key: "textColor",
-      // active: ({ editor }) => editor.isActive('textStyle'),
-      icon: ({
-        editor
-      }) => () => {
-        const {
-          color
-        } = editor.getAttributes("textStyle");
-        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;
+	const WysiwygColorTool = (vui) => {
+		return {
+			key: "textColor",
+			icon: ({ editor }) => () => {
+				const { color } = editor.getAttributes("textStyle");
+				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 WysiwygColorTool;
 }
-function _isSlot(s) {
-  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+
+//#endregion
+//#region src/tools/text-align.tsx
+/**
+* A list of available options for the text align attribute.
+* @remarks
+* `"justify"` has not yet been adopted because of ambiguity in browser support.
+*/
+function _isSlot$1(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
-var WYSIWYG_TEXT_ALIGN_VALUES = [
-  "left",
-  "center",
-  "right"
-  // 'justify',
+const WYSIWYG_TEXT_ALIGN_VALUES = [
+	"left",
+	"center",
+	"right"
 ];
-var DEFAULT_TYPES = ["heading", "paragraph"];
-var conditions = WYSIWYG_TEXT_ALIGN_VALUES.map((value) => [value, {
-  textAlign: value
-}]);
-var ICON_AT = {
-  left: "editorAlignLeft",
-  center: "editorAlignCenter",
-  right: "editorAlignRight"
+/**
+* A list of nodes where the text align attribute should be applied to.
+*/
+const DEFAULT_TYPES = ["heading", "paragraph"];
+const conditions = WYSIWYG_TEXT_ALIGN_VALUES.map((value) => [value, { textAlign: value }]);
+const ICON_AT = {
+	left: "editorAlignLeft",
+	center: "editorAlignCenter",
+	right: "editorAlignRight"
 };
 function resolveOptions(rawOptions) {
-  const types = rawOptions?.types || DEFAULT_TYPES.slice();
-  const alignments = rawOptions?.alignments || WYSIWYG_TEXT_ALIGN_VALUES.slice();
-  const defaultAlignment = rawOptions?.defaultAlignment || "left";
-  return {
-    types,
-    alignments,
-    defaultAlignment
-  };
+	return {
+		types: rawOptions?.types || DEFAULT_TYPES.slice(),
+		alignments: rawOptions?.alignments || WYSIWYG_TEXT_ALIGN_VALUES.slice(),
+		defaultAlignment: rawOptions?.defaultAlignment || "left"
+	};
 }
 function getCurrentAlign(editor, options) {
-  for (const [align, condition] of conditions) {
-    if (editor.isActive(condition)) return align;
-  }
-  return options.defaultAlignment;
+	for (const [align, condition] of conditions) if (editor.isActive(condition)) return align;
+	return options.defaultAlignment;
 }
-var WysiwygTextAlignTool = (vui, options) => {
-  const resolvedOptions = resolveOptions(options);
-  const {
-    alignments
-  } = resolvedOptions;
-  const getIcon = (value) => {
-    const iconKey = ICON_AT[value];
-    const icon = vui.icon(iconKey);
-    if (icon === "$empty" || typeof icon === "function") return;
-    return icon;
-  };
-  const variant = vui.setting("plainVariant");
-  const toolButtonActiveColor = vui.setting("primaryScope");
-  const tool = {
-    key: "textAlign",
-    icon: ({
-      editor
-    }) => getIcon(getCurrentAlign(editor, resolvedOptions)),
-    onClick: async ({
-      vui: vui2,
-      editor
-    }, ev) => {
-      vui2.menu({
-        distance: 0,
-        activator: ev,
-        content: (menu) => {
-          let _slot;
-          return createVNode(VButtonGroup, {
-            "variant": variant
-          }, _isSlot(_slot = alignments.map((value) => {
-            const isActive = editor.isActive({
-              textAlign: value
-            });
-            return createVNode(VButton, {
-              "tabindex": -1,
-              "color": isActive ? toolButtonActiveColor : void 0,
-              "key": value,
-              "icon": getIcon(value),
-              "onClick": () => {
-                editor.chain().focus().setTextAlign(value).run();
-              }
-            }, null);
-          })) ? _slot : {
-            default: () => [_slot]
-          });
-        }
-      });
-    },
-    floating: true,
-    extensions: [TextAlign.configure(resolvedOptions)]
-  };
-  return tool;
+const WysiwygTextAlignTool = (vui, options) => {
+	const resolvedOptions = resolveOptions(options);
+	const { alignments } = resolvedOptions;
+	const getIcon = (value) => {
+		const iconKey = ICON_AT[value];
+		const icon = vui.icon(iconKey);
+		if (icon === "$empty" || typeof icon === "function") return;
+		return icon;
+	};
+	const variant = vui.setting("plainVariant");
+	const toolButtonActiveColor = vui.setting("primaryScope");
+	return {
+		key: "textAlign",
+		icon: ({ editor }) => getIcon(getCurrentAlign(editor, resolvedOptions)),
+		onClick: async ({ vui, editor }, ev) => {
+			vui.menu({
+				distance: 0,
+				activator: ev,
+				content: (menu) => {
+					let _slot;
+					return createVNode(VButtonGroup, { "variant": variant }, _isSlot$1(_slot = alignments.map((value) => {
+						const isActive = editor.isActive({ textAlign: value });
+						return createVNode(VButton, {
+							"tabindex": -1,
+							"color": isActive ? toolButtonActiveColor : void 0,
+							"key": value,
+							"icon": getIcon(value),
+							"onClick": () => {
+								editor.chain().focus().setTextAlign(value).run();
+							}
+						}, null);
+					})) ? _slot : { default: () => [_slot] });
+				}
+			});
+		},
+		floating: true,
+		extensions: [TextAlign.configure(resolvedOptions)]
+	};
 };
 
-// src/tools/custom-tag.ts
+//#endregion
+//#region src/tools/custom-tag.ts
+/**
+* Generate Custom Tag Tool
+*
+* @param markName - Mark name
+* @param settings - Tool Configuration
+* @returns Generated Tool
+*/
 function createWysiwygCustomTagTool(markName, settings) {
-  const Mark2 = createWysiwygCustomTagMark(markName, settings);
-  const { icon, floating = true } = settings;
-  return (vui) => {
-    const tool = {
-      key: `customTag:${markName}`,
-      icon,
-      floating,
-      active: ({ editor }) => editor.isActive(markName),
-      onClick: ({ editor }) => {
-        editor.chain().focus().toggleCustomTag(markName).run();
-      },
-      extensions: [WysiwygCustomTagExtension, Mark2.configure(settings)]
-    };
-    return tool;
-  };
+	const Mark = createWysiwygCustomTagMark(markName, settings);
+	const { icon, floating = true } = settings;
+	return (vui) => {
+		return {
+			key: `customTag:${markName}`,
+			icon,
+			floating,
+			active: ({ editor }) => editor.isActive(markName),
+			onClick: ({ editor }) => {
+				editor.chain().focus().toggleCustomTag(markName).run();
+			},
+			extensions: [WysiwygCustomTagExtension, Mark.configure(settings)]
+		};
+	};
 }
-function _isSlot2(s) {
-  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+
+//#endregion
+//#region src/components/VWysiwygEditor/VWysiwygEditor.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
-var slots = defineSlots();
-var VWysiwygEditor = defineComponent({
-  name: "VWysiwygEditor",
-  props: {
-    ...createTextableProps(),
-    ...createFormNodeWrapperProps(),
-    ...createControlFieldProps(),
-    ...createControlFieldProviderProps(),
-    ...createControlProps(),
-    ...slots(),
-    extensions: {
-      type: Array,
-      default: () => []
-    },
-    tools: {
-      type: Array,
-      default: () => []
-    },
-    floatingToolbar: Boolean,
-    disabledMinHeight: Boolean,
-    disabledMaxHeight: Boolean,
-    removeDefaultWrapper: {
-      type: Boolean,
-      default: true
-    }
-  },
-  emits: {
-    ...createTextableEmits()
-  },
-  slots,
-  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 classes = computed(() => ["v-wysiwyg-editor", control.classes.value, `v-wysiwyg-editor--${control.size.value}`, {
-      "v-wysiwyg-editor--disabled-min-height": props.disabledMinHeight,
-      "v-wysiwyg-editor--disabled-max-height": props.disabledMaxHeight
-    }]);
-    const inputControl = new TextableControl(props, ctx, {
-      nodeType: VUI_WYSIWYG_EDITOR_SYMBOL,
-      validationValue: () => textRef.value
-    });
-    const getOutput = (editor2, type) => {
-      if (props.removeDefaultWrapper && editor2.isEmpty) return "";
-      if (type === "html") return editor2.getHTML();
-      if (type === "text") return editor2.getText();
-      return "";
-    };
-    const initializeCtx = new WysiwygEditorInitializeContext(() => vui, {
-      onCreate: ({
-        editor: editor2
-      }) => {
-        textRef.value = getOutput(editor2, "text");
-        updateEditable();
-      },
-      onFocus: ({
-        event
-      }) => {
-        inputControl.focusHandler(event);
-      },
-      onBlur: ({
-        event
-      }) => {
-        inputControl.blurHandler(event);
-      },
-      onUpdate: ({
-        editor: editor2
-      }) => {
-        inputControl.value = getOutput(editor2, "html");
-        textRef.value = getOutput(editor2, "text");
-      }
-    });
-    const extensions = [StarterKit.configure({
-      bold: false,
-      bulletList: false,
-      orderedList: false,
-      undoRedo: false,
-      italic: false
-    }), ...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 || getOutput($editor, "html") === modelValue) return;
-      $editor.commands.setContent(modelValue == null ? "" : modelValue, {
-        emitUpdate: false
-      });
-      textRef.value = getOutput($editor, "text");
-    });
-    initializeCtx.on("create", ({
-      editor: editor2
-    }) => {
-      textRef.value = getOutput(editor2, "text");
-      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) => editor.value?.chain().focus(position, options);
-    const wysiwygContext = computed(() => ({
-      vui,
-      editor: editor.value
-    }));
-    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
-      }, _isSlot2(_slot = tools.map(({
-        key,
-        icon,
-        onClick,
-        disabled,
-        active
-      }) => {
-        const isActive = !!_editor && resolveContextualValue(context, active);
-        const isDisabled = !inputControl.canOperation || !!_editor && resolveContextualValue(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
-        }, _isSlot2(child) ? child : {
-          default: () => [child]
-        });
-      })) ? _slot : {
-        default: () => [_slot]
-      });
-    };
-    onBeforeUnmount(() => {
-      editor.value?.destroy();
-    });
-    const api = {
-      get editor() {
-        return editor.value;
-      },
-      control: inputControl
-    };
-    ctx.expose(api);
-    const handleClickLabel = (ev) => {
-      focus("start", {
-        scrollIntoView: true
-      });
-    };
-    const defaultSlot = () => createVNode("div", {
-      "class": "v-wysiwyg-editor__body"
-    }, [createVNode(EditorContent, {
-      "class": "v-wysiwyg-editor__input__element wysiwyg",
-      "editor": editor.value
-    }, null), !props.floatingToolbar && !!editor.value && !inputControl.isReadonly && createVNode(BubbleMenu, {
-      "editor": editor.value
-    }, {
-      default: () => [createVNode("div", {
-        "class": "v-wysiwyg-editor__bubble-menu"
-      }, [createTools(true)])]
-    })]);
-    const formControlDefaultSlot = () => createVNode("div", {
-      "class": "v-wysiwyg-editor__wrapper"
-    }, [!inputControl.isReadonly && createTools(), createVNode(VControlField, {
-      "class": "v-wysiwyg-editor__input",
-      "autoHeight": true,
-      "startAdornment": props.startAdornment,
-      "endAdornment": props.endAdornment,
-      "size": control.size.value
-    }, {
-      ...ctx.slots,
-      default: withCtx(defaultSlot)
-    })]);
-    const infoAppendsSlot = () => {
-      const {
-        counterResult
-      } = inputControl;
-      if (!counterResult) return;
-      return createVNode(VTextCounter, counterResult, null);
-    };
-    return () => createVNode(VFormControl, {
-      "nodeControl": inputControl,
-      "class": classes.value,
-      "label": props.label,
-      "hint": props.hint,
-      "hinttip": props.hinttip,
-      "hiddenInfo": props.hiddenInfo,
-      "requiredChip": props.requiredChip,
-      "onClickLabel": handleClickLabel
-    }, {
-      ...ctx.slots,
-      default: withCtx(formControlDefaultSlot),
-      infoAppends: withCtx(infoAppendsSlot)
-    });
-  }
+const slots = defineSlots();
+const VWysiwygEditor = defineComponent({
+	name: "VWysiwygEditor",
+	props: {
+		...createTextableProps(),
+		...createFormNodeWrapperProps(),
+		...createControlFieldProps(),
+		...createControlFieldProviderProps(),
+		...createControlProps(),
+		...slots(),
+		extensions: {
+			type: Array,
+			default: () => []
+		},
+		tools: {
+			type: Array,
+			default: () => []
+		},
+		floatingToolbar: Boolean,
+		disabledMinHeight: Boolean,
+		disabledMaxHeight: Boolean,
+		removeDefaultWrapper: {
+			type: Boolean,
+			default: true
+		}
+	},
+	emits: { ...createTextableEmits() },
+	slots,
+	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 classes = computed(() => [
+			"v-wysiwyg-editor",
+			control.classes.value,
+			`v-wysiwyg-editor--${control.size.value}`,
+			{
+				"v-wysiwyg-editor--disabled-min-height": props.disabledMinHeight,
+				"v-wysiwyg-editor--disabled-max-height": props.disabledMaxHeight
+			}
+		]);
+		const inputControl = new TextableControl(props, ctx, {
+			nodeType: VUI_WYSIWYG_EDITOR_SYMBOL,
+			validationValue: () => textRef.value
+		});
+		const getOutput = (editor, type) => {
+			if (props.removeDefaultWrapper && editor.isEmpty) return "";
+			if (type === "html") return editor.getHTML();
+			if (type === "text") return editor.getText();
+			return "";
+		};
+		const initializeCtx = new WysiwygEditorInitializeContext(() => vui, {
+			onCreate: ({ editor }) => {
+				textRef.value = getOutput(editor, "text");
+				updateEditable();
+			},
+			onFocus: ({ event }) => {
+				inputControl.focusHandler(event);
+			},
+			onBlur: ({ event }) => {
+				inputControl.blurHandler(event);
+			},
+			onUpdate: ({ editor }) => {
+				inputControl.value = getOutput(editor, "html");
+				textRef.value = getOutput(editor, "text");
+			}
+		});
+		const extensions = [
+			StarterKit.configure({
+				bold: false,
+				bulletList: false,
+				orderedList: false,
+				undoRedo: false,
+				italic: false
+			}),
+			...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 || getOutput($editor, "html") === modelValue) return;
+			$editor.commands.setContent(modelValue == null ? "" : modelValue, { emitUpdate: false });
+			textRef.value = getOutput($editor, "text");
+		});
+		initializeCtx.on("create", ({ editor }) => {
+			textRef.value = getOutput(editor, "text");
+			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) => editor.value?.chain().focus(position, options);
+		const wysiwygContext = computed(() => ({
+			vui,
+			editor: editor.value
+		}));
+		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 && resolveContextualValue(context, active);
+				const isDisabled = !inputControl.canOperation || !!_editor && resolveContextualValue(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?.destroy();
+		});
+		const api = {
+			get editor() {
+				return editor.value;
+			},
+			control: inputControl
+		};
+		ctx.expose(api);
+		const handleClickLabel = (ev) => {
+			focus("start", { scrollIntoView: true });
+		};
+		const defaultSlot = () => createVNode("div", { "class": "v-wysiwyg-editor__body" }, [createVNode(EditorContent, {
+			"class": "v-wysiwyg-editor__input__element wysiwyg",
+			"editor": editor.value
+		}, null), !props.floatingToolbar && !!editor.value && !inputControl.isReadonly && createVNode(BubbleMenu, { "editor": editor.value }, { default: () => [createVNode("div", { "class": "v-wysiwyg-editor__bubble-menu" }, [createTools(true)])] })]);
+		const formControlDefaultSlot = () => createVNode("div", { "class": "v-wysiwyg-editor__wrapper" }, [!inputControl.isReadonly && createTools(), createVNode(VControlField, {
+			"class": "v-wysiwyg-editor__input",
+			"autoHeight": true,
+			"startAdornment": props.startAdornment,
+			"endAdornment": props.endAdornment,
+			"size": control.size.value
+		}, {
+			...ctx.slots,
+			default: withCtx(defaultSlot)
+		})]);
+		const infoAppendsSlot = () => {
+			const { counterResult } = inputControl;
+			if (!counterResult) return;
+			return createVNode(VTextCounter, counterResult, null);
+		};
+		return () => createVNode(VFormControl, {
+			"nodeControl": inputControl,
+			"class": classes.value,
+			"label": props.label,
+			"hint": props.hint,
+			"hinttip": props.hinttip,
+			"hiddenInfo": props.hiddenInfo,
+			"requiredChip": props.requiredChip,
+			"onClickLabel": handleClickLabel
+		}, {
+			...ctx.slots,
+			default: withCtx(formControlDefaultSlot),
+			infoAppends: withCtx(infoAppendsSlot)
+		});
+	}
 });
 function resolveContextualValue(ctx, source) {
-  return typeof source === "function" ? source(ctx) : source;
+	return typeof source === "function" ? source(ctx) : source;
 }
 
+//#endregion
 export { VUI_WYSIWYG_EDITOR_SYMBOL, VWysiwygEditor, WYSIWYG_TEXT_ALIGN_VALUES, WysiwygBulletListTool, WysiwygColorExtension, WysiwygCustomTagExtension, WysiwygEditorInitializeContext, WysiwygFormatBoldTool, WysiwygFormatItalicTool, WysiwygFormatUnderlineTool, WysiwygHistoryTool, WysiwygLinkTool, WysiwygLinter, WysiwygLinterBadWords, WysiwygLinterHeadingLevel, WysiwygLinterPlugin, WysiwygLinterPunctuation, WysiwygOrderedListTool, WysiwygTextAlignTool, createWysiwygColorTool, createWysiwygCustomTagMark, createWysiwygCustomTagTool, createWysiwygExtension, resolveRawWysiwygEditorTools, resolveRawWysiwygExtensions };
-//# sourceMappingURL=vui-wysiwyg.mjs.map
 //# sourceMappingURL=vui-wysiwyg.mjs.map