@onereach/ui-components 2.70.0-beta.2159.0 → 2.70.0-beta.2164.0

package/dist/esm/v2/{codemirrorView-8ea431d2.js → codemirrorView-2e87c938.js}

@@ -1,7 +1,7 @@
 import { TextSelection, Selection } from 'prosemirror-state';
 import { exitCode } from 'prosemirror-commands';
 import { EditorState } from '@codemirror/state';
-import { EditorView, keymap } from '@codemirror/view';
+import { EditorView, highlightActiveLine, highlightActiveLineGutter, lineNumbers, keymap } from '@codemirror/view';
 
 const computeChange = (oldVal, newVal) => {
   if (oldVal === newVal) {
@@ -46,7 +46,7 @@ class CodeMirrorView {
     this.dom = this.cm.dom;
     const cmState = EditorState.create({
       doc: this.node.textContent,
-      extensions: [changeFilter, keymap.of([{
+      extensions: [changeFilter, highlightActiveLine(), highlightActiveLineGutter(), lineNumbers(), keymap.of([{
         key: 'ArrowUp',
         run: this.mayBeEscape('line', -1)
       }, {

package/dist/esm/v2/components/index.js

@@ -96,7 +96,7 @@ export { p as PropsV3, a as useQueueV3, u as useToastV3 } from '../useToast-0665
 export { _ as OrTooltip } from '../OrTooltip-614b016d.js';
 export { _ as OrTooltipContent } from '../OrTooltip.vue_rollup-plugin-vue_script-63559536.js';
 export { _ as OrTooltipV3 } from '../OrTooltip-513bee30.js';
-export { _ as OrRichTextEditorV3 } from '../OrRichTextEditor-2d152db0.js';
+export { _ as OrRichTextEditorV3 } from '../OrRichTextEditor-ed356c5b.js';
 import 'vue-demi';
 import 'lodash';
 import '../normalize-component-6e8e3d80.js';
@@ -148,6 +148,6 @@ import '@tiptap/starter-kit';
 import '@tiptap/extension-underline';
 import '@tiptap/extension-heading';
 import '@tiptap/extension-placeholder';
-import '../codemirrorView-8ea431d2.js';
+import '../codemirrorView-2e87c938.js';
 import 'prosemirror-state';
 import 'prosemirror-commands';

package/dist/esm/v2/components/or-rich-text-editor-v3/index.js

@@ -1,4 +1,4 @@
-export { _ as OrRichTextEditorV3 } from '../../OrRichTextEditor-2d152db0.js';
+export { _ as OrRichTextEditorV3 } from '../../OrRichTextEditor-ed356c5b.js';
 import 'vue-demi';
 import '../../useClassAttribute-47fdb016.js';
 import '@vueuse/core';
@@ -37,7 +37,7 @@ import '@tiptap/starter-kit';
 import '@tiptap/extension-underline';
 import '@tiptap/extension-heading';
 import '@tiptap/extension-placeholder';
-import '../../codemirrorView-8ea431d2.js';
+import '../../codemirrorView-2e87c938.js';
 import 'prosemirror-state';
 import 'prosemirror-commands';
 import '@codemirror/state';

package/dist/esm/v2/components/or-rich-text-editor-v3/utils/codemirror/codemirrorView.d.ts

@@ -4,24 +4,6 @@ import { Node as ProsemirrorNode } from 'prosemirror-model';
 import { Transaction as CMTransaction } from '@codemirror/state';
 import { Command, EditorView as CMView } from '@codemirror/view';
 import { CodeMirrorViewOptions } from './types';
-declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        codeBlock: {
-            /**
-             * Set a code block
-             */
-            setCodeBlock: (attributes?: {
-                language: string;
-            }) => ReturnType;
-            /**
-             * Toggle a code block
-             */
-            toggleCodeBlock: (attributes?: {
-                language: string;
-            }) => ReturnType;
-        };
-    }
-}
 declare class CodeMirrorView implements NodeView {
     name: string;
     node: ProsemirrorNode;

package/dist/esm/v2/components/or-rich-text-editor-v3/utils/codemirror/index.js

@@ -1,4 +1,4 @@
-export { C as CodeMirrorView } from '../../../../codemirrorView-8ea431d2.js';
+export { C as CodeMirrorView } from '../../../../codemirrorView-2e87c938.js';
 import 'prosemirror-state';
 import 'prosemirror-commands';
 import '@codemirror/state';

package/dist/esm/v2/index.js

@@ -96,7 +96,7 @@ export { p as PropsV3, a as useQueueV3, u as useToastV3 } from './useToast-06654
 export { _ as OrTooltip } from './OrTooltip-614b016d.js';
 export { _ as OrTooltipContent } from './OrTooltip.vue_rollup-plugin-vue_script-63559536.js';
 export { _ as OrTooltipV3 } from './OrTooltip-513bee30.js';
-export { _ as OrRichTextEditorV3 } from './OrRichTextEditor-2d152db0.js';
+export { _ as OrRichTextEditorV3 } from './OrRichTextEditor-ed356c5b.js';
 export { D as DropdownClose, a as DropdownOpen } from './dropdown-open-0d314aa4.js';
 export { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
 export { u as useElevation } from './useElevation-31bfe1f6.js';
@@ -148,7 +148,7 @@ import '@tiptap/starter-kit';
 import '@tiptap/extension-underline';
 import '@tiptap/extension-heading';
 import '@tiptap/extension-placeholder';
-import './codemirrorView-8ea431d2.js';
+import './codemirrorView-2e87c938.js';
 import 'prosemirror-state';
 import 'prosemirror-commands';
 

package/dist/esm/v3/{OrRichTextEditor-f1271eb6.js → OrRichTextEditor-f710fc9d.js}

@@ -26,7 +26,7 @@ import StarterKit from '@tiptap/starter-kit';
 import Underline from '@tiptap/extension-underline';
 import Heading from '@tiptap/extension-heading';
 import Placeholder from '@tiptap/extension-placeholder';
-import { C as CodeMirrorView } from './codemirrorView-8ea431d2.js';
+import { C as CodeMirrorView } from './codemirrorView-2e87c938.js';
 import { minimalSetup } from 'codemirror';
 import { javascript } from '@codemirror/lang-javascript';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode, withCtx, createTextVNode, toDisplayString, createElementVNode, Fragment, renderList, createBlock, createCommentVNode } from 'vue';
@@ -140,7 +140,7 @@ const EditorInput = [
 'min-h-[88px]'];
 
 var codemirrorNode = Node.create({
-  name: 'code_block',
+  name: 'codeBlock',
   content: 'text*',
   marks: '',
   group: 'block',
@@ -367,12 +367,10 @@ var script = defineComponent({
         editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleBlockquote().run();
       } else if (item === 'codeBlock') {
         if (!isActive.value['codeBlock']) {
-          // isActive.value['codeBlock'] = true;
-          editor === null || editor === void 0 ? void 0 : editor.commands.setNode('code_block', {
+          editor === null || editor === void 0 ? void 0 : editor.commands.setNode(item, {
             language: 'javascript'
           });
         } else {
-          // isActive.value['codeBlock'] = false;
           editor === null || editor === void 0 ? void 0 : editor.commands.setNode('paragraph');
         }
       } else if (item === 'heading') {
@@ -415,11 +413,7 @@ var script = defineComponent({
     const setActiveFormats = () => {
       const toolbarList = props.toolbar.flat();
       toolbarList.forEach(item => {
-        if (item === 'codeBlock') {
-          isActive.value[item] = (editor === null || editor === void 0 ? void 0 : editor.isActive('code_block')) || false;
-        } else {
-          isActive.value[item] = (editor === null || editor === void 0 ? void 0 : editor.isActive(item)) || false;
-        }
+        isActive.value[item] = (editor === null || editor === void 0 ? void 0 : editor.isActive(item)) || false;
       });
     };
     // Styles
@@ -564,7 +558,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, 8 /* PROPS */, ["trigger"])) : createCommentVNode("v-if", true)], 2 /* CLASS */);
 }
 
-var css_248z = ".tiptap-editor ol {\n  margin: 0 24px;\n  list-style: decimal;\n}\n.tiptap-editor ul {\n  margin: 0 24px;\n  list-style: initial;\n}\n.tiptap-editor pre {\n  background-color: rgba(186, 209, 236, 0.3);\n  padding: 4px 8px;\n  margin: 4px 0;\n  width: 100%;\n  border-radius: 4px;\n}\n.tiptap-editor blockquote {\n  margin: 8px 24px;\n  padding: 0 24px;\n  border-left: 4px solid #bad1ec;\n}\n.tiptap-editor .is-editor-empty::before {\n  content: attr(data-placeholder);\n  height: 0;\n  pointer-events: none;\n  float: left;\n}\n.tiptap-editor .cm-editor {\n  border: solid 1px #838990;\n  border-radius: 4px;\n}\n.tiptap-editor .cm-editor.cm-focused {\n  outline: none;\n}\n.tiptap-editor .cm-editor .cm-line:hover {\n  background-color: rgba(0, 95, 177, 0.08);\n}";
+var css_248z = ".tiptap-editor ol {\n  margin: 0 24px;\n  list-style: decimal;\n}\n.tiptap-editor ul {\n  margin: 0 24px;\n  list-style: initial;\n}\n.tiptap-editor pre {\n  background-color: rgba(186, 209, 236, 0.3);\n  padding: 4px 8px;\n  margin: 4px 0;\n  width: 100%;\n  border-radius: 4px;\n}\n.tiptap-editor blockquote {\n  margin: 8px 24px;\n  padding: 0 24px;\n  border-left: 4px solid #bad1ec;\n}\n.tiptap-editor .is-editor-empty::before {\n  content: attr(data-placeholder);\n  height: 0;\n  pointer-events: none;\n  float: left;\n}\n.tiptap-editor .cm-editor {\n  border: none;\n  border-radius: 4px;\n}\n.tiptap-editor .cm-editor .cm-scroller {\n  border-radius: 4px;\n}\n.tiptap-editor .cm-editor.cm-focused {\n  outline: none;\n}\n.tiptap-editor .cm-editor .cm-gutters {\n  background-color: rgba(0, 95, 177, 0.08);\n  border: none;\n}\n.tiptap-editor .cm-editor .cm-gutters .cm-gutterElement {\n  padding: 0 10px;\n}\n.tiptap-editor .cm-editor .cm-gutters .cm-gutterElement.cm-activeLineGutter {\n  background-color: rgba(0, 95, 177, 0.07);\n}";
 styleInject(css_248z);
 
 script.render = render;

package/dist/esm/v3/{codemirrorView-8ea431d2.js → codemirrorView-2e87c938.js}

@@ -1,7 +1,7 @@
 import { TextSelection, Selection } from 'prosemirror-state';
 import { exitCode } from 'prosemirror-commands';
 import { EditorState } from '@codemirror/state';
-import { EditorView, keymap } from '@codemirror/view';
+import { EditorView, highlightActiveLine, highlightActiveLineGutter, lineNumbers, keymap } from '@codemirror/view';
 
 const computeChange = (oldVal, newVal) => {
   if (oldVal === newVal) {
@@ -46,7 +46,7 @@ class CodeMirrorView {
     this.dom = this.cm.dom;
     const cmState = EditorState.create({
       doc: this.node.textContent,
-      extensions: [changeFilter, keymap.of([{
+      extensions: [changeFilter, highlightActiveLine(), highlightActiveLineGutter(), lineNumbers(), keymap.of([{
         key: 'ArrowUp',
         run: this.mayBeEscape('line', -1)
       }, {

package/dist/esm/v3/components/index.js

@@ -90,7 +90,7 @@ export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from '../types-
 export { p as PropsV3, a as useQueueV3, u as useToastV3 } from '../useToast-0665462d.js';
 export { s as OrTooltip, a as OrTooltipContent } from '../OrTooltip-78cd7f6b.js';
 export { s as OrTooltipV3 } from '../OrTooltip-50d27b4f.js';
-export { s as OrRichTextEditorV3 } from '../OrRichTextEditor-f1271eb6.js';
+export { s as OrRichTextEditorV3 } from '../OrRichTextEditor-f710fc9d.js';
 import 'vue-demi';
 import 'lodash';
 import 'vue';
@@ -140,6 +140,6 @@ import '@tiptap/starter-kit';
 import '@tiptap/extension-underline';
 import '@tiptap/extension-heading';
 import '@tiptap/extension-placeholder';
-import '../codemirrorView-8ea431d2.js';
+import '../codemirrorView-2e87c938.js';
 import 'prosemirror-state';
 import 'prosemirror-commands';

package/dist/esm/v3/components/or-rich-text-editor-v3/index.js

@@ -1,4 +1,4 @@
-export { s as OrRichTextEditorV3 } from '../../OrRichTextEditor-f1271eb6.js';
+export { s as OrRichTextEditorV3 } from '../../OrRichTextEditor-f710fc9d.js';
 import 'vue-demi';
 import '../../useClassAttribute-47fdb016.js';
 import '@vueuse/core';
@@ -36,7 +36,7 @@ import '@tiptap/starter-kit';
 import '@tiptap/extension-underline';
 import '@tiptap/extension-heading';
 import '@tiptap/extension-placeholder';
-import '../../codemirrorView-8ea431d2.js';
+import '../../codemirrorView-2e87c938.js';
 import 'prosemirror-state';
 import 'prosemirror-commands';
 import '@codemirror/state';

package/dist/esm/v3/components/or-rich-text-editor-v3/utils/codemirror/codemirrorView.d.ts

@@ -4,24 +4,6 @@ import { Node as ProsemirrorNode } from 'prosemirror-model';
 import { Transaction as CMTransaction } from '@codemirror/state';
 import { Command, EditorView as CMView } from '@codemirror/view';
 import { CodeMirrorViewOptions } from './types';
-declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        codeBlock: {
-            /**
-             * Set a code block
-             */
-            setCodeBlock: (attributes?: {
-                language: string;
-            }) => ReturnType;
-            /**
-             * Toggle a code block
-             */
-            toggleCodeBlock: (attributes?: {
-                language: string;
-            }) => ReturnType;
-        };
-    }
-}
 declare class CodeMirrorView implements NodeView {
     name: string;
     node: ProsemirrorNode;

package/dist/esm/v3/components/or-rich-text-editor-v3/utils/codemirror/index.js

@@ -1,4 +1,4 @@
-export { C as CodeMirrorView } from '../../../../codemirrorView-8ea431d2.js';
+export { C as CodeMirrorView } from '../../../../codemirrorView-2e87c938.js';
 import 'prosemirror-state';
 import 'prosemirror-commands';
 import '@codemirror/state';

package/dist/esm/v3/index.js

@@ -90,7 +90,7 @@ export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from './types-8
 export { p as PropsV3, a as useQueueV3, u as useToastV3 } from './useToast-0665462d.js';
 export { s as OrTooltip, a as OrTooltipContent } from './OrTooltip-78cd7f6b.js';
 export { s as OrTooltipV3 } from './OrTooltip-50d27b4f.js';
-export { s as OrRichTextEditorV3 } from './OrRichTextEditor-f1271eb6.js';
+export { s as OrRichTextEditorV3 } from './OrRichTextEditor-f710fc9d.js';
 export { D as DropdownClose, a as DropdownOpen } from './dropdown-open-0d314aa4.js';
 export { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
 export { u as useElevation } from './useElevation-31bfe1f6.js';
@@ -140,7 +140,7 @@ import '@tiptap/starter-kit';
 import '@tiptap/extension-underline';
 import '@tiptap/extension-heading';
 import '@tiptap/extension-placeholder';
-import './codemirrorView-8ea431d2.js';
+import './codemirrorView-2e87c938.js';
 import 'prosemirror-state';
 import 'prosemirror-commands';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "2.70.0-beta.2159.0",
+  "version": "2.70.0-beta.2164.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",

package/src/components/or-rich-text-editor-v3/OrRichTextEditor.stories3.ts

@@ -68,8 +68,8 @@ const Template: StoryFn<typeof OrRichTextEditor> = (args) => ({
   template: `
   <div>
   <OrRichTextEditor
-    v-model="model"
-    v-bind="args"
+  v-model="model"
+  v-bind="args"
   >
   </OrRichTextEditor>
   </div>

package/src/components/or-rich-text-editor-v3/OrRichTextEditor.vue

@@ -315,10 +315,8 @@ export default defineComponent({
       }
       else if (item === 'codeBlock') {
         if (!isActive.value['codeBlock']) {
-          // isActive.value['codeBlock'] = true;
-          editor?.commands.setNode('code_block', { language: 'javascript' });
+          editor?.commands.setNode(item, { language: 'javascript' });
         } else {
-          // isActive.value['codeBlock'] = false;
           editor?.commands.setNode('paragraph');
         }
       }
@@ -367,11 +365,7 @@ export default defineComponent({
     const setActiveFormats = () => {
       const toolbarList = props.toolbar.flat() as string[];
       toolbarList.forEach((item) => {
-        if (item === 'codeBlock') {
-          isActive.value[item] = editor?.isActive('code_block') || false;
-        } else {
-          isActive.value[item] = editor?.isActive(item) || false;
-        }
+        isActive.value[item] = editor?.isActive(item) || false;
       });
     };
 
@@ -494,19 +488,29 @@ export default defineComponent({
   }
 
   .cm-editor {
-    border: solid 1px #838990;
+    border: none;
     border-radius: 4px;
 
+    .cm-scroller {
+       border-radius: 4px;
+    }
+
     &.cm-focused {
       outline: none;
     }
 
-    .cm-line {
-      &:hover {
-        background-color: rgba(0, 95, 177, 0.08);
+    .cm-gutters {
+      background-color: rgba(0, 95, 177, 0.08);
+      border: none;
+
+      .cm-gutterElement {
+        padding: 0 10px;
+
+        &.cm-activeLineGutter {
+          background-color: rgba(0, 95, 177, 0.07)
+        }
       }
     }
-
   }
 }
 </style>

package/src/components/or-rich-text-editor-v3/utils/codemirror/codemirrorNode.ts

@@ -4,7 +4,7 @@ import { minimalSetup } from 'codemirror';
 import { javascript } from '@codemirror/lang-javascript';
 
 export default Node.create({
-  name: 'code_block',
+  name: 'codeBlock',
   content: 'text*',
   marks: '',
   group: 'block',

package/src/components/or-rich-text-editor-v3/utils/codemirror/codemirrorView.ts

@@ -3,25 +3,17 @@ import { EditorView, NodeView } from 'prosemirror-view';
 import { Node as ProsemirrorNode } from 'prosemirror-model';
 import { exitCode } from 'prosemirror-commands';
 import { EditorState as CMState, Transaction as CMTransaction } from '@codemirror/state';
-import { Command, EditorView as CMView, keymap } from '@codemirror/view';
+import {
+  Command, 
+  EditorView as CMView, 
+  keymap,
+  highlightActiveLine, 
+  highlightActiveLineGutter,
+  lineNumbers,
+ } from '@codemirror/view';
 
 import { ComputeChange, CodeMirrorViewOptions } from './types';
 
-declare module '@tiptap/core' {
-  interface Commands<ReturnType> {
-    codeBlock: {
-      /**
-       * Set a code block
-       */
-      setCodeBlock: (attributes?: { language: string; }) => ReturnType;
-      /**
-       * Toggle a code block
-       */
-      toggleCodeBlock: (attributes?: { language: string; }) => ReturnType;
-    };
-  }
-}
-
 const computeChange = (oldVal: string, newVal: string): ComputeChange | null => {
   if (oldVal === newVal) {
     return null;
@@ -90,6 +82,9 @@ class CodeMirrorView implements NodeView {
       doc: this.node.textContent,
       extensions: [
         changeFilter,
+        highlightActiveLine(),
+        highlightActiveLineGutter(),
+        lineNumbers(),
         keymap.of([
           {
             key: 'ArrowUp',