@fastkit/vui 0.7.61 → 0.7.66

package/dist/vui.mjs

@@ -8,14 +8,14 @@ import { getDocumentScroller as getDocumentScroller$1 } from '@fastkit/vue-scrol
 import { VProgressCircular } from '@fastkit/vue-loading';
 export * from '@fastkit/vue-loading';
 import { useScopeColorClass, colorSchemeProps, useColorClasses, toScopeColorClass } from '@fastkit/vue-color-scheme';
-import { loadImage, IN_WINDOW, isPromise, debounce } from '@fastkit/helpers';
+import { loadImage, IN_WINDOW, isPromise } from '@fastkit/helpers';
 export { ICON_NAMES } from '@fastkit/icon-font';
 import { VAppContainer, VAppLayoutControl } from '@fastkit/vue-app-layout';
 import { createTextableProps, createTextableEmits, TextableControl } from '@fastkit/vue-form-control';
 import { useEditor, EditorContent, BubbleMenu } from '@tiptap/vue-3';
 import StarterKit from '@tiptap/starter-kit';
 import { Extension } from '@tiptap/core';
-import { DecorationSet, Decoration } from 'prosemirror-view';
+import { Decoration, DecorationSet } from 'prosemirror-view';
 import { Plugin, PluginKey, TextSelection } from 'prosemirror-state';
 import { BulletList } from '@tiptap/extension-bullet-list';
 import { Bold } from '@tiptap/extension-bold';
@@ -25,6 +25,7 @@ import { History } from '@tiptap/extension-history';
 import { Link } from '@tiptap/extension-link';
 import { validateIf, url } from '@fastkit/rules';
 import { OrderedList } from '@tiptap/extension-ordered-list';
+import TextStyle from '@tiptap/extension-text-style';
 
 const CONTROL_SIZES = ['sm', 'md', 'lg'];
 const CONTROL_FIELD_VARIANTS = ['outlined', 'filled', 'flat'];
@@ -1227,6 +1228,7 @@ const VButtonGroup = defineComponent({
 
   setup(props, ctx) {
     return () => {
+      let hasIcon = false;
       let buttonLength = 0;
       let tmp = renderSlotOrEmpty$1(ctx.slots) || [];
 
@@ -1243,6 +1245,11 @@ const VButtonGroup = defineComponent({
         }
 
         buttonLength++;
+
+        if (!hasIcon && node.props && !!node.props.icon) {
+          hasIcon = true;
+        }
+
         return {
           isButton: true,
           node
@@ -1259,6 +1266,7 @@ const VButtonGroup = defineComponent({
             ...childProps,
             rouded: false,
             class: ['v-button-group__item', {
+              'v-button--icon': hasIcon,
               'v-button-group__item--has-left': hasLeft,
               'v-button-group__item--has-right': hasRight
             }]
@@ -1268,7 +1276,9 @@ const VButtonGroup = defineComponent({
         return child.node;
       });
       return createVNode("div", {
-        "class": "v-button-group"
+        "class": ['v-button-group', {
+          'v-button-group--has-icon': hasIcon
+        }]
       }, [$children]);
     };
   }
@@ -2887,7 +2897,12 @@ const prefixedEventName = (source) => {
 };
 class WysiwygEditorInitializeContext {
     listeners = {};
-    constructor(opts = {}) {
+    _vui;
+    get vui() {
+        return this._vui();
+    }
+    constructor(vuiGetter, opts = {}) {
+        this._vui = vuiGetter;
         EDITOR_EVENTS.forEach((event) => {
             this.listeners[event] = [];
             const prefixed = prefixedEventName(event);
@@ -2916,7 +2931,44 @@ class WysiwygEditorInitializeContext {
         return opts;
     }
 }
+// export function createWysiwygExtension<Options = any, Storage = any>(
+//   extension: Extension<Options, Storage>,
+// ): Extension<Options, Storage>;
+// export function createWysiwygExtension<Options = any, Storage = any>(
+//   node: Node<Options, Storage>,
+// ): Node<Options, Storage>;
+// export function createWysiwygExtension<Options = any, Storage = any>(
+//   mark: Mark<Options, Storage>,
+// ): Mark<Options, Storage>;
+// export function createWysiwygExtension<Options = any, Storage = any>(
+//   factory: WysiwygExtensionFactory<Options, Storage>,
+// ): WysiwygExtensionFactory<Options, Storage>;
+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) {
@@ -2985,7 +3037,7 @@ const VWysiwygEditor = defineComponent({
       nodeType: VUI_WYSIWYG_EDITOR_SYMBOL,
       validationValue: () => textRef.value
     });
-    const initializeCtx = new WysiwygEditorInitializeContext({
+    const initializeCtx = new WysiwygEditorInitializeContext(() => vui, {
       onCreate: ({
         editor
       }) => {
@@ -3084,9 +3136,9 @@ const VWysiwygEditor = defineComponent({
       const _editor = editor.value;
       const variant = vui.setting(bubbleMenu ? 'containedVariant' : 'plainVariant');
       return createVNode(VButtonGroup, {
-        "class": {
+        "class": ['v-wysiwyg-editor__toolbar', {
           'v-wysiwyg-editor__floating-toolbar': props.floatingToolbar
-        },
+        }],
         "variant": variant
       }, _isSlot$7(_slot = tools.map(({
         key,
@@ -3098,16 +3150,23 @@ const VWysiwygEditor = defineComponent({
         const isActive = !!_editor && resolveContextableValue(context, active);
         const isDisabled = !inputControl.canOperation || !!_editor && resolveContextableValue(context, disabled);
         let iconName;
+        let child;
 
         if (typeof icon === 'function') {
           if (_editor) {
-            iconName = icon(context);
+            const _child = icon(context);
+
+            if (typeof _child === 'function') {
+              child = _child();
+            } else {
+              iconName = child;
+            }
           }
         } else {
           iconName = icon;
         }
 
-        if (!iconName) return;
+        if (!iconName && child == null) return;
         return createVNode(VButton, {
           "tabindex": -1,
           "key": key,
@@ -3115,7 +3174,9 @@ const VWysiwygEditor = defineComponent({
           "onClick": ev => onClick(context, ev),
           "color": isActive ? toolButtonActiveColor : undefined,
           "disabled": isDisabled
-        }, null);
+        }, _isSlot$7(child) ? child : {
+          default: () => [child]
+        });
       })) ? _slot : {
         default: () => [_slot]
       });
@@ -3199,190 +3260,223 @@ function resolveContextableValue(ctx, source) {
   return typeof source === 'function' ? source(ctx) : source;
 }
 
-const PROBLEM_CLASS_NAME = 'v-linter__problem';
-const ISSUE_ICON_CLASS_NAME = 'v-linter__issue-icon';
-const ISSUE_MENU_CLASS_NAME = 'v-linter__issue-menu';
-function renderIcon(view, issue) {
-    const { level = 'warning' } = issue;
-    const icon = document.createElement('div');
-    icon.className = `${ISSUE_ICON_CLASS_NAME} ${level}-scope`;
-    icon.title = issue.message;
-    icon.issue = issue;
-    return icon;
-}
-function renderMenu(view, issue) {
-    const menuWrapper = document.createElement('div');
-    menuWrapper.className = 'v-linter__issue-menu-wrapper';
-    const menu = document.createElement('div');
-    menu.className = `${ISSUE_MENU_CLASS_NAME} elevation-3`;
-    menu.innerText = issue.message;
-    const { fix, fixMessage } = issue;
-    if (fix && fixMessage) {
-        const $fix = document.createElement('button');
-        $fix.type = 'button';
-        $fix.innerHTML = fixMessage;
-        $fix.addEventListener('click', () => {
-            fix(view, issue);
-        });
-        $fix.className = `v-linter__issue-menu__fix`;
-        menu.appendChild($fix);
-    }
-    menu.issue = issue;
-    menuWrapper.appendChild(menu);
-    return menuWrapper;
-}
-function getIssueElement(source, className) {
-    if (!source || !(source instanceof HTMLElement)) {
-        return;
-    }
-    if (source.classList.contains(className)) {
-        return source;
+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;
+}
+
+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 : undefined
+    }));
+
+    if (icon) {
+      decorations.push(Decoration.widget(issue.from, view => renderIcon(view, issue)));
+    }
+  });
+  const decorationSet = DecorationSet.create(doc, decorations);
+  return {
+    issues,
+    decorationSet
+  };
+}
+
+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
+        };
+      };
+
+      return [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 this.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;
+          }
+
+        }
+      })];
+    }
+
+  });
+});
+
+let IDX = 256, BUFFER;
+const 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;
     }
-    const el = source.closest(`.${className}`);
-    if (el) {
-        return el;
+    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 += '-';
     }
-}
-function getIconElement(source) {
-    return getIssueElement(source, ISSUE_ICON_CLASS_NAME);
-}
-function getMenuElement(source) {
-    return getIssueElement(source, ISSUE_MENU_CLASS_NAME);
-}
-function getProblemElement(source) {
-    return getIssueElement(source, PROBLEM_CLASS_NAME);
-}
-function runAllLinterPlugins(doc, plugins) {
-    const decorations = [];
-    const results = plugins
-        .map((RegisteredLinterPlugin) => {
-        return new RegisteredLinterPlugin(doc).scan().getResults();
-    })
-        .flat();
-    results.forEach((issue) => {
-        const { level = 'warning' } = issue;
-        decorations.push(Decoration.inline(issue.from, issue.to, {
-            class: `${PROBLEM_CLASS_NAME} ${level}-scope`,
-            'data-issue': JSON.stringify(issue),
-            title: issue.message,
-        }), Decoration.widget(issue.from, (view) => renderIcon(view, issue)), Decoration.widget(issue.from, (view) => renderMenu(view, issue)));
-    });
-    return DecorationSet.create(doc, decorations);
-}
-function updateMenusPosition(editorElement) {
-    const { left, right } = editorElement.getBoundingClientRect();
-    const menus = Array.from(editorElement.querySelectorAll(`.${ISSUE_MENU_CLASS_NAME}`));
-    menus.forEach((menu) => {
-        const { left: menuLeft, right: menuRight } = menu.getBoundingClientRect();
-        const overflow = menuRight - right;
-        let offset = 0;
-        if (overflow > 0) {
-            offset = -overflow;
-            if (menuLeft + offset < left) {
-                offset = 0;
-            }
-        }
-        menu.style.transform = `translateX(${offset}px)`;
-    });
-}
-const debouncedUpdateMenusPosition = debounce(updateMenusPosition, 250);
-const Linter = Extension.create({
-    name: 'linter',
-    addOptions() {
-        return {
-            plugins: [],
-        };
-    },
-    onCreate() {
-        const { dom } = this.editor.view;
-        debouncedUpdateMenusPosition(dom);
-    },
-    onUpdate() {
-        const { dom } = this.editor.view;
-        debouncedUpdateMenusPosition(dom);
-    },
-    addProseMirrorPlugins() {
-        const { plugins } = this.options;
-        return [
-            new Plugin({
-                key: new PluginKey('linter'),
-                state: {
-                    init(_, { doc }) {
-                        return runAllLinterPlugins(doc, plugins);
-                    },
-                    apply(transaction, oldState) {
-                        return transaction.docChanged
-                            ? runAllLinterPlugins(transaction.doc, plugins)
-                            : oldState;
-                    },
-                },
-                props: {
-                    decorations(state) {
-                        return this.getState(state);
-                    },
-                    handleClick(view, _, event) {
-                        const activeMenus = Array.from(view.dom.querySelectorAll(`.${ISSUE_MENU_CLASS_NAME}--active`));
-                        activeMenus.forEach((menu) => menu.classList.remove(`${ISSUE_MENU_CLASS_NAME}--active`));
-                        const problem = getProblemElement(event.target);
-                        const issueString = problem && problem.dataset['issue'];
-                        const issue = issueString && JSON.parse(issueString);
-                        if (issue) {
-                            const menuWrapper = problem.previousElementSibling;
-                            const menu = menuWrapper &&
-                                menuWrapper.querySelector(`.${ISSUE_MENU_CLASS_NAME}`);
-                            menu && menu.classList.add(`${ISSUE_MENU_CLASS_NAME}--active`);
-                            const { from, to } = issue;
-                            view.dispatch(view.state.tr
-                                .setSelection(TextSelection.create(view.state.doc, from, to))
-                                .scrollIntoView());
-                            return true;
-                        }
-                        const menu = getMenuElement(event.target);
-                        if (menu) {
-                            menu.classList.add(`${ISSUE_MENU_CLASS_NAME}--active`);
-                        }
-                        const target = getIconElement(event.target);
-                        if (target && target.issue) {
-                            const menuWrapper = target.nextElementSibling;
-                            const menu = menuWrapper &&
-                                menuWrapper.querySelector(`.${ISSUE_MENU_CLASS_NAME}`);
-                            menu && menu.classList.add(`${ISSUE_MENU_CLASS_NAME}--active`);
-                            const { from, to } = target.issue;
-                            view.dispatch(view.state.tr
-                                .setSelection(TextSelection.create(view.state.doc, from, to))
-                                .scrollIntoView());
-                            return true;
-                        }
-                        return false;
-                    },
-                    handleDoubleClick(view, _, event) {
-                        const target = getIconElement(event.target);
-                        if (target && target.issue) {
-                            const prob = target.issue;
-                            if (prob.fix) {
-                                prob.fix(view, prob);
-                                view.focus();
-                                return true;
-                            }
-                        }
-                        return false;
-                    },
-                },
-            }),
-        ];
-    },
-});
+    IDX++;
+    return out;
+}
 
-class LinterPlugin {
+class WysiwygLinterPlugin {
     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() {
@@ -3393,35 +3487,45 @@ class LinterPlugin {
     }
 }
 
-function BadWords(words) {
-    const regex = new RegExp(`\\b(${words.join('|')})\\b`);
-    return class BadWords extends LinterPlugin {
-        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: () => {
-                            console.log('hoge');
-                        },
-                        fixMessage: `「${fixValue}」に修正する。`,
-                    });
-                }
-            });
-            return this;
-        }
-    };
+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: 'どうにかする',
+              handler: () => {
+                console.log('hoge');
+              }
+            }]
+          });
+        }
+      });
+      return this;
+    }
+
+  };
 }
 
-class HeadingLevel extends LinterPlugin {
+class WysiwygLinterHeadingLevel extends WysiwygLinterPlugin {
     fixHeader(level) {
         return function ({ state, dispatch }, issue) {
             dispatch(state.tr.setNodeMarkup(issue.from - 1, undefined, { level }));
@@ -3438,7 +3542,10 @@ class HeadingLevel extends LinterPlugin {
                         message: `Heading too small (${level} under ${lastHeadLevel})`,
                         from: position + 1,
                         to: position + 1 + node.content.size,
-                        fix: this.fixHeader(lastHeadLevel + 1),
+                        fix: {
+                            message: '修正する',
+                            handler: this.fixHeader(lastHeadLevel + 1),
+                        },
                     });
                 }
                 lastHeadLevel = level;
@@ -3448,7 +3555,7 @@ class HeadingLevel extends LinterPlugin {
     }
 }
 
-class Punctuation extends LinterPlugin {
+class WysiwygLinterPunctuation extends WysiwygLinterPlugin {
     regex = / ([,.!?:]) ?/g;
     fix(replacement) {
         return function ({ state, dispatch }, issue) {
@@ -3469,7 +3576,10 @@ class Punctuation extends LinterPlugin {
                     message: 'Suspicious spacing around punctuation',
                     from: position + matches.index,
                     to: position + matches.index + matches[0].length,
-                    fix: this.fix(`${matches[1]} `),
+                    fix: {
+                        message: 'Fix it!!!',
+                        handler: this.fix(`${matches[1]} `),
+                    },
                 });
             }
         });
@@ -3477,6 +3587,49 @@ class Punctuation extends LinterPlugin {
     }
 }
 
+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 }) => {
+                return chain().setMark('textStyle', { color }).run();
+            },
+            unsetColor: () => ({ chain }) => {
+                return chain()
+                    .setMark('textStyle', { color: null })
+                    .removeEmptyTextStyle()
+                    .run();
+            },
+        };
+    },
+});
+
 const WysiwygBulletListTool = (vui, options) => {
     const tool = {
         key: 'bulletList',
@@ -3617,18 +3770,73 @@ const WysiwygOrderedListTool = (vui, options) => {
     return tool;
 };
 
-const WysiwygTextColorTool = (vui) => {
-    const tool = {
-        key: 'textColor',
-        icon: vui.icon('editorTextColor'),
-        // icon: (gen) => vui.icon('editorTextColor'),
-        onClick: (ctx) => {
-            ctx.vui.alert('ok');
-        },
-        floating: true,
-    };
-    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;
+}
 
 const {
   props,
@@ -5245,6 +5453,10 @@ class VuiService {
     return this.stack.snackbar(...args);
   }
 
+  menu(...args) {
+    return this.stack.menu(...args);
+  }
+
   formPrompt(settings, slot) {
     let form;
     const options = {
@@ -5396,4 +5608,4 @@ function installVuiPlugin(app, opts) {
   return app.use(VuiPlugin, opts);
 }
 
-export { AVATAR_SIZES, BadWords, CHIP_SIZES, CONTROL_FIELD_VARIANTS, CONTROL_LOADING_SPINNER_SIZES, CONTROL_SIZES, HeadingLevel, Linter, LinterPlugin, PAGINATION_ALIGNS, Punctuation, VApp, VAvatar, VBreadcrumbs, VBusyImage, VButton, VButtonGroup, VCard, VCardActions, VCardContent, VCheckbox, VCheckboxGroup, VChip, VContentSwitcher, VDataTable, VDrawerLayout, VForm, VFormControl, VGridContainer, VGridItem, VHero, VIcon, VListTile, VNavigation, VNavigationItem, VNumberField, VOption, VOptionGroup, VPagination, VPaper, VRadio, VRadioGroup, VSelect, VSkeltonLoaderBone, VSwitch, VSwitchGroup, VTabs, VTextField, VTextarea, VToolbar, VToolbarEdge, VToolbarMenu, VToolbarTitle, VUI_CHECKBOX_GROUP_SYMBOL, VUI_CHECKBOX_SYMBOL, VUI_FORM_SYMBOL, VUI_OPTION_SYMBOL, VUI_RADIO_GROUP_SYMBOL, VUI_RADIO_SYMBOL, VUI_SELECT_SYMBOL, VUI_SWITCH_GROUP_SYMBOL, VUI_SWITCH_SYMBOL, VUI_TEXTAREA_SYMBOL, VUI_TEXT_FIELD_SYMBOL, VUI_WYSIWYG_EDITOR_SYMBOL, VWysiwygEditor, VuiColorProviderInjectionKey, VuiControlFieldInjectionKey, VuiControlInjectionKey, VuiInjectionKey, VuiPlugin, VuiService, WysiwygBulletListTool, WysiwygEditorInitializeContext, WysiwygFormatBoldTool, WysiwygFormatItalicTool, WysiwygFormatUnderlineTool, WysiwygHistoryTool, WysiwygLinkTool, WysiwygOrderedListTool, WysiwygTextColorTool, configureDataTableDefaults, createAvatarProps, createCardProps, createChipProps, createControlFieldProviderProps, createControlProps, createElevationProps, createListTileProps, createNavigationItemProps, createPaperBaseProps, createPaperProps, createRequiredChipRenderer, createVFormProps, defineFormSelectorComponent, iconProps, installVuiPlugin, listTileEmits, mergeVuiPluginOptions, mergeVuiServiceIconSettings, mergeVuiServiceOptions, mergeVuiServiceUISettings, paginationProps, rawIconProp, renderNavigationItemInput, resolveNavigationItemInput, resolveRawIconProp, resolveRawWysiwygEditorTools, resolveRawWysiwygExtensions, splitAttrs, useControl, useControlField, useElevation, useVui, useVuiColorProvider, vueButtonProps };
+export { AVATAR_SIZES, CHIP_SIZES, CONTROL_FIELD_VARIANTS, CONTROL_LOADING_SPINNER_SIZES, CONTROL_SIZES, PAGINATION_ALIGNS, VApp, VAvatar, VBreadcrumbs, VBusyImage, VButton, VButtonGroup, VCard, VCardActions, VCardContent, VCheckbox, VCheckboxGroup, VChip, VContentSwitcher, VDataTable, VDrawerLayout, VForm, VFormControl, VGridContainer, VGridItem, VHero, VIcon, VListTile, VNavigation, VNavigationItem, VNumberField, VOption, VOptionGroup, VPagination, VPaper, VRadio, VRadioGroup, VSelect, VSkeltonLoaderBone, VSwitch, VSwitchGroup, VTabs, VTextField, VTextarea, VToolbar, VToolbarEdge, VToolbarMenu, VToolbarTitle, VUI_CHECKBOX_GROUP_SYMBOL, VUI_CHECKBOX_SYMBOL, VUI_FORM_SYMBOL, VUI_OPTION_SYMBOL, VUI_RADIO_GROUP_SYMBOL, VUI_RADIO_SYMBOL, VUI_SELECT_SYMBOL, VUI_SWITCH_GROUP_SYMBOL, VUI_SWITCH_SYMBOL, VUI_TEXTAREA_SYMBOL, VUI_TEXT_FIELD_SYMBOL, VUI_WYSIWYG_EDITOR_SYMBOL, VWysiwygEditor, VuiColorProviderInjectionKey, VuiControlFieldInjectionKey, VuiControlInjectionKey, VuiInjectionKey, VuiPlugin, VuiService, WysiwygBulletListTool, WysiwygColorExtension, WysiwygEditorInitializeContext, WysiwygFormatBoldTool, WysiwygFormatItalicTool, WysiwygFormatUnderlineTool, WysiwygHistoryTool, WysiwygLinkTool, WysiwygLinter, WysiwygLinterBadWords, WysiwygLinterHeadingLevel, WysiwygLinterPlugin, WysiwygLinterPunctuation, WysiwygOrderedListTool, configureDataTableDefaults, createAvatarProps, createCardProps, createChipProps, createControlFieldProviderProps, createControlProps, createElevationProps, createListTileProps, createNavigationItemProps, createPaperBaseProps, createPaperProps, createRequiredChipRenderer, createVFormProps, createWysiwygColorTool, createWysiwygExtension, defineFormSelectorComponent, iconProps, installVuiPlugin, listTileEmits, mergeVuiPluginOptions, mergeVuiServiceIconSettings, mergeVuiServiceOptions, mergeVuiServiceUISettings, paginationProps, rawIconProp, renderNavigationItemInput, resolveNavigationItemInput, resolveRawIconProp, resolveRawWysiwygEditorTools, resolveRawWysiwygExtensions, splitAttrs, useControl, useControlField, useElevation, useVui, useVuiColorProvider, vueButtonProps };