@fastkit/vui 0.7.59 → 0.7.65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fastkit/vui",
-  "version": "0.7.59",
+  "version": "0.7.65",
   "description": "@fastkit/vui",
   "buildOptions": {
     "name": "Vui",
@@ -32,13 +32,14 @@
     "vue": "^3.2.26"
   },
   "dependencies": {
-    "@fastkit/color-scheme": "0.7.59",
-    "@fastkit/icon-font": "0.7.59",
-    "@fastkit/tiny-logger": "0.7.59",
-    "@fastkit/vite-kit": "0.7.59",
-    "@fastkit/vue-kit": "0.7.59",
+    "@fastkit/color-scheme": "0.7.65",
+    "@fastkit/icon-font": "0.7.65",
+    "@fastkit/tiny-logger": "0.7.65",
+    "@fastkit/vite-kit": "0.7.65",
+    "@fastkit/vue-kit": "0.7.65",
     "@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

@@ -1,5 +1,13 @@
 import './VWysiwygEditor.scss';
-import { defineComponent, PropType, computed, ref, watch } from 'vue';
+import {
+  defineComponent,
+  PropType,
+  computed,
+  ref,
+  watch,
+  onBeforeUnmount,
+  VNodeChild,
+} from 'vue';
 import {
   createFormControlProps,
   FormControlSlots,
@@ -34,9 +42,13 @@ import {
 import StarterKit from '@tiptap/starter-kit';
 import { VButton, VButtonGroup } from '../VButton';
 import {
+  RawWysiwygExtension,
+  resolveRawWysiwygExtensions,
   RawWysiwygEditorTool,
   resolveRawWysiwygEditorTools,
   WysiwygEditorContext,
+  // EditorEventsOptions,
+  WysiwygEditorInitializeContext,
 } from './schemes';
 
 export const VWysiwygEditor = defineComponent({
@@ -49,6 +61,10 @@ export const VWysiwygEditor = defineComponent({
     ...createControlFieldProviderProps(),
     ...createControlProps(),
     ...defineSlotsProps<FormControlSlots & InputBoxSlots>(),
+    extensions: {
+      type: Array as PropType<RawWysiwygExtension[]>,
+      default: () => [],
+    },
     tools: {
       type: Array as PropType<RawWysiwygEditorTool[]>,
       default: () => [],
@@ -78,6 +94,23 @@ export const VWysiwygEditor = defineComponent({
       validationValue: () => textRef.value,
     });
 
+    const initializeCtx = new WysiwygEditorInitializeContext(() => vui, {
+      onCreate: ({ editor }) => {
+        textRef.value = editor.getText();
+        updateEditable();
+      },
+      onFocus: ({ event }) => {
+        inputControl.focusHandler(event);
+      },
+      onBlur: ({ event }) => {
+        inputControl.blurHandler(event);
+      },
+      onUpdate: ({ editor }) => {
+        inputControl.value = editor.getHTML();
+        textRef.value = editor.getText();
+      },
+    });
+
     const extensions = [
       StarterKit.configure({
         bold: false,
@@ -86,6 +119,10 @@ export const VWysiwygEditor = defineComponent({
         history: false,
         italic: false,
       }),
+      // Linter.configure({
+      //   plugins: [BadWords(['abc', 'evidently']), Punctuation, HeadingLevel],
+      // }),
+      ...resolveRawWysiwygExtensions(props.extensions, initializeCtx),
       ...wysiwygSettings.value.extensions,
     ];
 
@@ -110,21 +147,13 @@ export const VWysiwygEditor = defineComponent({
       },
     );
 
+    initializeCtx.on('create', ({ editor }) => {
+      textRef.value = editor.getText();
+      updateEditable();
+    });
+
     const editor = useEditor({
-      onCreate: ({ editor }) => {
-        textRef.value = editor.getText();
-        updateEditable();
-      },
-      onFocus: (ctx) => {
-        inputControl.focusHandler(ctx.event);
-      },
-      onBlur: (ctx) => {
-        inputControl.blurHandler(ctx.event);
-      },
-      onUpdate: (ev) => {
-        inputControl.value = ev.editor.getHTML();
-        textRef.value = ev.editor.getText();
-      },
+      ...initializeCtx.editorOptions(),
       autofocus: props.autofocus,
       content: props.modelValue,
       extensions,
@@ -177,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 =
@@ -188,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
@@ -206,14 +244,19 @@ export const VWysiwygEditor = defineComponent({
                 icon={iconName}
                 onClick={(ev) => onClick(context, ev)}
                 color={isActive ? toolButtonActiveColor : undefined}
-                disabled={isDisabled}
-              />
+                disabled={isDisabled}>
+                {child}
+              </VButton>
             );
           })}
         </VButtonGroup>
       );
     };
 
+    onBeforeUnmount(() => {
+      editor.value && editor.value.destroy();
+    });
+
     return {
       editor,
       ...inputControl.expose(),

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

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

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

@@ -0,0 +1,140 @@
+.v-linter {
+  &__problem {
+    margin-bottom: -1px;
+    cursor: help;
+    background: var(--deep-color);
+    border-bottom: 1px solid var(--main-color);
+  }
+
+  &__issue-icon {
+    position: absolute;
+    right: 2px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.2em;
+    height: 1.2em;
+    margin-top: 0.2em;
+    // padding-left: 0.5px;
+    font-family: times, georgia, serif;
+    font-size: 15px;
+    font-weight: 700;
+    line-height: 1;
+    color: var(--text-color);
+    text-align: center;
+    cursor: pointer;
+    background: var(--main-color);
+    border-radius: 100px;
+
+    &::before {
+      content: '!';
+    }
+  }
+
+  &__issue-menu-wrapper {
+    position: relative;
+    display: inline-block;
+    width: 0px;
+    height: 1em;
+    overflow: visible;
+  }
+
+  &__issue-menu {
+    font-size: 87.5%;
+    // font-size: 12px;
+    line-height: 1.5;
+
+    .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;
+      color: var(--palette-link);
+      text-decoration: underline;
+      cursor: pointer;
+      background: transparent;
+      border: 0;
+      outline: 0;
+      appearance: none;
+    }
+  }
+}

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;
+            },
+          },
+        }),
+      ];
+    },
+  });
+});