@fastkit/vui 0.7.61 → 0.7.66

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fastkit/vui",
-  "version": "0.7.61",
+  "version": "0.7.66",
   "description": "@fastkit/vui",
   "buildOptions": {
     "name": "Vui",
@@ -32,13 +32,14 @@
     "vue": "^3.2.26"
   },
   "dependencies": {
-    "@fastkit/color-scheme": "0.7.61",
-    "@fastkit/icon-font": "0.7.61",
-    "@fastkit/tiny-logger": "0.7.61",
-    "@fastkit/vite-kit": "0.7.61",
-    "@fastkit/vue-kit": "0.7.61",
+    "@fastkit/color-scheme": "0.7.66",
+    "@fastkit/icon-font": "0.7.66",
+    "@fastkit/tiny-logger": "0.7.66",
+    "@fastkit/vite-kit": "0.7.66",
+    "@fastkit/vue-kit": "0.7.66",
     "@tiptap/extension-link": "^2.0.0-beta.36",
     "@tiptap/extension-underline": "^2.0.0-beta.23",
+    "@tiptap/extension-text-style": "^2.0.0-beta.23",
     "@tiptap/starter-kit": "^2.0.0-beta.183",
     "@tiptap/vue-3": "^2.0.0-beta.90",
     "eta": "^1.12.3",

package/src/components/VButton/VButtonGroup.scss

@@ -20,4 +20,8 @@
       z-index: 1;
     }
   }
+
+  // &--has-icon &__item {
+
+  // }
 }

package/src/components/VButton/VButtonGroup.tsx

@@ -25,6 +25,7 @@ export const VButtonGroup = defineComponent({
   },
   setup(props, ctx) {
     return () => {
+      let hasIcon = false;
       let buttonLength = 0;
 
       let tmp = renderSlotOrEmpty(ctx.slots) || [];
@@ -43,6 +44,10 @@ export const VButtonGroup = defineComponent({
 
         buttonLength++;
 
+        if (!hasIcon && node.props && !!node.props.icon) {
+          hasIcon = true;
+        }
+
         return {
           isButton: true,
           node,
@@ -67,6 +72,7 @@ export const VButtonGroup = defineComponent({
             class: [
               'v-button-group__item',
               {
+                'v-button--icon': hasIcon,
                 'v-button-group__item--has-left': hasLeft,
                 'v-button-group__item--has-right': hasRight,
               },
@@ -75,7 +81,12 @@ export const VButtonGroup = defineComponent({
         }
         return child.node;
       });
-      return <div class="v-button-group">{$children}</div>;
+      return (
+        <div
+          class={['v-button-group', { 'v-button-group--has-icon': hasIcon }]}>
+          {$children}
+        </div>
+      );
     };
   },
 });

package/src/components/VWysiwygEditor/VWysiwygEditor.scss

@@ -20,6 +20,10 @@
     position: relative;
   }
 
+  .v-control-field__body {
+    width: 100%;
+  }
+
   &__floating-toolbar {
     position: absolute;
     right: 0;

package/src/components/VWysiwygEditor/VWysiwygEditor.tsx

@@ -6,6 +6,7 @@ import {
   ref,
   watch,
   onBeforeUnmount,
+  VNodeChild,
 } from 'vue';
 import {
   createFormControlProps,
@@ -49,7 +50,6 @@ import {
   // EditorEventsOptions,
   WysiwygEditorInitializeContext,
 } from './schemes';
-// import { Linter, BadWords, Punctuation, HeadingLevel } from './extensions';
 
 export const VWysiwygEditor = defineComponent({
   name: 'VWysiwygEditor',
@@ -94,7 +94,7 @@ export const VWysiwygEditor = defineComponent({
       validationValue: () => textRef.value,
     });
 
-    const initializeCtx = new WysiwygEditorInitializeContext({
+    const initializeCtx = new WysiwygEditorInitializeContext(() => vui, {
       onCreate: ({ editor }) => {
         textRef.value = editor.getText();
         updateEditable();
@@ -206,9 +206,12 @@ export const VWysiwygEditor = defineComponent({
 
       return (
         <VButtonGroup
-          class={{
-            'v-wysiwyg-editor__floating-toolbar': props.floatingToolbar,
-          }}
+          class={[
+            'v-wysiwyg-editor__toolbar',
+            {
+              'v-wysiwyg-editor__floating-toolbar': props.floatingToolbar,
+            },
+          ]}
           variant={variant}>
           {tools.map(({ key, icon, onClick, disabled, active }) => {
             const isActive =
@@ -217,16 +220,22 @@ export const VWysiwygEditor = defineComponent({
               !inputControl.canOperation ||
               (!!_editor && resolveContextableValue(context, disabled));
             let iconName: IconName | undefined;
+            let child: VNodeChild;
 
             if (typeof icon === 'function') {
               if (_editor) {
-                iconName = icon(context);
+                const _child = icon(context);
+                if (typeof _child === 'function') {
+                  child = _child();
+                } else {
+                  iconName = child as any;
+                }
               }
             } else {
               iconName = icon;
             }
 
-            if (!iconName) return;
+            if (!iconName && child == null) return;
 
             return (
               <VButton
@@ -235,8 +244,9 @@ export const VWysiwygEditor = defineComponent({
                 icon={iconName}
                 onClick={(ev) => onClick(context, ev)}
                 color={isActive ? toolButtonActiveColor : undefined}
-                disabled={isDisabled}
-              />
+                disabled={isDisabled}>
+                {child}
+              </VButton>
             );
           })}
         </VButtonGroup>

package/src/components/VWysiwygEditor/extensions/color.ts

@@ -0,0 +1,72 @@
+import { Extension } from '@tiptap/core';
+import '@tiptap/extension-text-style';
+
+export type WysiwygColorOptions = {
+  types: string[];
+};
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    color: {
+      /**
+       * Set the text color
+       */
+      setColor: (color: string) => ReturnType;
+      /**
+       * Unset the text color
+       */
+      unsetColor: () => ReturnType;
+    };
+  }
+}
+
+export const WysiwygColorExtension = Extension.create<WysiwygColorOptions>({
+  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();
+        },
+    };
+  },
+});

package/src/components/VWysiwygEditor/extensions/index.ts

@@ -1 +1,2 @@
 export * from './linter';
+export * from './color';

package/src/components/VWysiwygEditor/extensions/linter/Linter.scss

@@ -40,26 +40,91 @@
   }
 
   &__issue-menu {
-    position: absolute;
-    top: calc(100% + 8px);
-    left: 0;
-    min-width: 200px;
-    max-width: calc(100vw - 40px);
-    padding: 8px;
-    // font-size: 12px;
     font-size: 87.5%;
+    // font-size: 12px;
     line-height: 1.5;
-    pointer-events: none;
-    background: #fff;
-    border-radius: 4px;
-    opacity: 0;
-    transition: opacity 0.15s;
 
-    &--active {
-      pointer-events: auto;
-      opacity: 1;
+    .v-dialog__body {
+      padding: 0;
+      font-size: inherit;
+    }
+
+    &__message {
+      padding: 8px;
+    }
+
+    &__fixers {
+      position: relative;
+      padding: 4px 0;
+      // padding: 8px;
+      // border-top: solid 1px var(--divider-color);
+      &::before {
+        position: absolute;
+        top: 0;
+        right: 0;
+        left: 0;
+        display: block;
+        height: 1px;
+        content: '';
+        background: currentColor;
+        opacity: 0.5;
+      }
     }
 
+    &__fixer {
+      &__button {
+        position: relative;
+        display: block;
+        width: 100%;
+        padding: 8px;
+        font: inherit;
+        font-size: 12px;
+        // margin-top: 8px;
+        // color: var(--palette-link);
+        text-align: left;
+        // text-decoration: underline;
+        cursor: pointer;
+        background: transparent;
+        border: 0;
+        outline: 0;
+        appearance: none;
+
+        &::before {
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          display: block;
+          content: '';
+          background: currentColor;
+          opacity: 0;
+          transition: 0.15s;
+        }
+
+        &:hover,
+        &:focus {
+          &::before {
+            opacity: 0.1;
+          }
+        }
+
+        &__message {
+          position: relative;
+        }
+      }
+    }
+    // pointer-events: none;
+    // background: #fff;
+    // border-radius: 4px;
+    // opacity: 0;
+    // transition: opacity 0.15s;
+
+    // &--active {
+    //   pointer-events: auto;
+    //   opacity: 1;
+    // }
+
     &__fix {
       display: inline;
       margin-top: 8px;

package/src/components/VWysiwygEditor/extensions/linter/Linter.tsx

@@ -0,0 +1,214 @@
+import './Linter.scss';
+
+import { Extension } from '@tiptap/core';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+import { Plugin, PluginKey, TextSelection } from 'prosemirror-state';
+import { Node as ProsemirrorNode } from 'prosemirror-model';
+import {
+  WysiwygLinterPlugin,
+  WysiwygLinterResult as Issue,
+  WysiwygLinterFixMessage,
+} from './LinterPlugin';
+import { EditorView } from 'prosemirror-view';
+import { createWysiwygExtension } from '../../schemes';
+
+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: WysiwygLinterFixMessage) {
+  return typeof message === 'function' ? message() : message;
+}
+
+function renderIcon(view: EditorView<any>, issue: 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: ProsemirrorNode,
+  plugins: Array<typeof WysiwygLinterPlugin>,
+) {
+  const decorations: [any?] = [];
+
+  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,
+  };
+}
+
+export interface WysiwygLinterOptions {
+  plugins: Array<typeof WysiwygLinterPlugin>;
+}
+
+export interface WysiwygLinterStorage {
+  issues: Issue[];
+}
+
+export const WysiwygLinter = createWysiwygExtension((ctx) => {
+  function showMenu(view: EditorView<any>, issue: Issue, event: 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) => (
+        <div class="v-linter__issue-menu__body">
+          <div
+            class={[
+              'v-linter__issue-menu__message',
+              `${scope}-scope ${variant}`,
+            ]}>
+            {message}
+          </div>
+          {issue.fix.length && (
+            <div class="v-linter__issue-menu__fixers">
+              {issue.fix.map((fixer, index) => (
+                <div key={index} class="v-linter__issue-menu__fixer">
+                  <button
+                    type="button"
+                    class="v-linter__issue-menu__fixer__button"
+                    onClick={() => {
+                      stack.close();
+                      fixer.handler(view, issue);
+                    }}>
+                    <span class="v-linter__issue-menu__fixer__button__message">
+                      {resolveWysiwygLinterFixMessage(fixer.message)}
+                    </span>
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      ),
+    });
+  }
+
+  return Extension.create<WysiwygLinterOptions, WysiwygLinterStorage>({
+    name: 'linter',
+
+    addOptions() {
+      return {
+        plugins: [],
+      };
+    },
+    addStorage() {
+      return {
+        issues: [],
+      };
+    },
+    addProseMirrorPlugins() {
+      const { plugins } = this.options;
+      const { storage } = this;
+
+      const runAll = (doc: ProsemirrorNode) => {
+        const { issues, decorationSet } = runAllLinterPlugins(doc, plugins);
+        storage.issues = issues;
+        return decorationSet;
+      };
+
+      const getIssue = (id: string) =>
+        storage.issues.find((issue) => issue.id === id);
+
+      const getIssueElementByEvent = (
+        source: EventTarget | null,
+      ):
+        | {
+            issue: Issue;
+          }
+        | undefined => {
+        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;
+            },
+          },
+        }),
+      ];
+    },
+  });
+});

package/src/components/VWysiwygEditor/extensions/linter/LinterPlugin.ts

@@ -1,36 +1,57 @@
+import { VNodeChild } from 'vue';
 import { Node as ProsemirrorNode } from 'prosemirror-model';
 import { EditorView } from 'prosemirror-view';
+import { cheepUUID } from './utils';
 
-export type FixFn = (view: EditorView, issue: LinterResult) => any;
+export type WysiwygLinterFixFn = (
+  view: EditorView,
+  issue: WysiwygLinterResult,
+) => any;
 
-export type LinterResultLevel = 'warning' | 'error';
+export type WysiwygLinterFixMessage = string | (() => VNodeChild);
 
-export interface LinterResult {
-  level: LinterResultLevel;
-  message: string;
+export interface WysiwygLinterFixer {
+  message: WysiwygLinterFixMessage;
+  handler: WysiwygLinterFixFn;
+}
+
+export type WysiwygLinterResultLevel = 'warning' | 'error';
+
+// fixers
+export interface WysiwygLinterResult {
+  id: string;
+  icon: boolean;
+  level: WysiwygLinterResultLevel;
+  message: WysiwygLinterFixMessage;
   from: number;
   to: number;
-  fix?: FixFn;
-  fixMessage?: string;
+  fix: WysiwygLinterFixer[];
 }
 
-export interface RawLinterResult extends Omit<LinterResult, 'level'> {
-  level?: LinterResultLevel;
+export interface RawLinterResult
+  extends Omit<WysiwygLinterResult, 'level' | 'fix' | 'id' | 'icon'> {
+  level?: WysiwygLinterResultLevel;
+  icon?: boolean;
+  fix?: WysiwygLinterFixer | WysiwygLinterFixer[];
 }
 
-export class LinterPlugin {
+export class WysiwygLinterPlugin {
   protected doc: ProsemirrorNode;
 
-  private results: Array<LinterResult> = [];
+  private results: Array<WysiwygLinterResult> = [];
 
   constructor(doc: ProsemirrorNode) {
     this.doc = doc;
   }
 
   record(result: RawLinterResult) {
+    const { fix = [], icon = false } = result;
     this.results.push({
       level: 'error',
+      id: cheepUUID(),
       ...result,
+      fix: Array.isArray(fix) ? fix : [fix],
+      icon,
     });
   }
 

package/src/components/VWysiwygEditor/extensions/linter/index.ts

@@ -1,5 +1,5 @@
-export { Linter } from './Linter';
-export { LinterPlugin } from './LinterPlugin';
-export type { LinterOptions } from './Linter';
+export { WysiwygLinter } from './Linter';
+export { WysiwygLinterPlugin } from './LinterPlugin';
+export type { WysiwygLinterOptions } from './Linter';
 
 export * from './plugins';

package/src/components/VWysiwygEditor/extensions/linter/plugins/BadWords.tsx

@@ -0,0 +1,50 @@
+import { WysiwygLinterPlugin } from '../LinterPlugin';
+
+export function WysiwygLinterBadWords(
+  words: string[],
+): typeof WysiwygLinterPlugin {
+  const regex = new RegExp(`\\b(${words.join('|')})\\b`);
+
+  return class WysiwygLinterBadWords extends WysiwygLinterPlugin {
+    scan() {
+      this.doc.descendants((node: any, position: number) => {
+        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: () => (
+                  <span>
+                    <code>{fixValue}</code>に修正する。
+                  </span>
+                ),
+                handler: () => {
+                  console.log('hoge');
+                },
+              },
+              {
+                message: 'どうにかする',
+                handler: () => {
+                  console.log('hoge');
+                },
+              },
+            ],
+          });
+        }
+      });
+
+      return this;
+    }
+  };
+}