@kvass/rich-text 1.5.2 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kvass/rich-text",
-  "version": "1.5.2",
+  "version": "1.6.0",
   "description": "rich text component for kvass",
   "main": "index.js",
   "scripts": {

package/src/Component.vue

@@ -32,10 +32,9 @@
             v-for="(item, index) in getCommands('bubble')"
             :key="'bubble' + index"
             class="richtext__bubble-button"
-            :class="{
-              'is-active': editor.isActive(item.isActiveKey || item.stateKey, item.commandProps),
-            }"
+            :class="{ 'is-active': isItemActive(item) }"
             :disabled="disabled || item.disabled"
+            :title="labels[item.stateKey]"
             @click="() => onMenuBarButtonClick(item)"
             type="button"
           >
@@ -53,10 +52,9 @@
           v-for="(item, index) in getCommands('menu')"
           :key="'menubar' + index"
           type="button"
-          :class="{
-            'is-active': editor.isActive(item.isActiveKey || item.stateKey, item.commandProps),
-          }"
+          :class="{ 'is-active': isItemActive(item) }"
           :disabled="disabled || item.disabled"
+          :title="labels[item.stateKey]"
           @click="() => onMenuBarButtonClick(item)"
         >
           <FontAwesomeIcon :icon="item.icon" size="sm" />
@@ -96,6 +94,7 @@ import Image from '@tiptap/extension-image'
 import Superscript from '@tiptap/extension-superscript'
 import CallToAction from './extensions/cta'
 import StarterKit from '@tiptap/starter-kit'
+import { LineCommands, LineShortcuts, isLineActive, runLineCommand } from './lines'
 
 import { Options } from '../index'
 
@@ -123,7 +122,7 @@ export default {
   },
   watch: {
     value(value) {
-      if (this.editor.getHTML() === value) return
+      if (this.getValue() === value) return
       this.editor.commands.setContent(this.value, false)
     },
     disabled(value) {
@@ -273,8 +272,23 @@ export default {
         .filter(Boolean)
         .filter(cmd => !appearance || cmd.appearance[appearance])
     },
+    getValue() {
+      const { doc } = this.editor.state
+      if (Tiptap.isNodeEmpty(doc, { ignoreWhitespace: true }) && !/\S/.test(doc.textContent))
+        return ''
+      return this.editor.getHTML()
+    },
+    isItemActive(item) {
+      const name = item.isActiveKey || item.stateKey
+      if (LineCommands.includes(item.commandKey))
+        return isLineActive(this.editor.state, name, item.commandProps)
+
+      return this.editor.isActive(name, item.commandProps)
+    },
     onMenuBarButtonClick(item) {
       if (item.customFunc) return item.customFunc.call(this, { editor: this.editor })
+      if (LineCommands.includes(item.commandKey))
+        return runLineCommand(this.editor, item.commandKey, item.commandProps)
 
       return this.editor.chain().focus()[item.commandKey](item.commandProps).run()
     },
@@ -312,12 +326,7 @@ export default {
       this.linkUrl = null
     },
     bubbleShouldShow({ editor }) {
-      return (
-        this.getCommands()
-          .filter(a => a.appearance.bubble)
-          .map(a => a.stateKey)
-          .some(k => editor.isActive(k)) || !this.editor.state.selection.empty
-      )
+      return !editor.state.selection.empty
     },
     isInternalUrl(value) {
       if (!typeof value === 'string') return
@@ -342,18 +351,14 @@ export default {
       editable: !this.disabled,
       extensions: [
         StarterKit,
+        LineShortcuts,
         ...this.getCommands()
           .map(({ extension }) => extension)
           .flat()
           .filter(Boolean),
       ],
       content: this.value,
-      onUpdate: () => {
-        const html = this.editor.getHTML()
-        if (/^<p>\s*<\/p>$/.test(html)) return this.$emit('input', '')
-
-        return this.$emit('input', html)
-      },
+      onUpdate: () => this.$emit('input', this.getValue()),
       onSelectionUpdate: ({ editor }) => {
         if (!this.bubbleShouldShow({ editor })) this.bubbleState = null
       },

package/src/lines.js

@@ -0,0 +1,152 @@
+import { CommandManager, Extension, isActive } from '@tiptap/core'
+import { EditorState, Selection, TextSelection } from '@tiptap/pm/state'
+import { canSplit } from '@tiptap/pm/transform'
+
+export const LineCommands = ['toggleHeading', 'toggleBulletList', 'toggleOrderedList']
+
+const ListTypes = { toggleBulletList: 'bulletList', toggleOrderedList: 'orderedList' }
+
+function isBreak(node) {
+  return Boolean(node) && node.type.name === 'hardBreak'
+}
+
+function closestList($pos) {
+  for (let depth = $pos.depth; depth > 0; depth--) {
+    const node = $pos.node(depth)
+    if (Object.values(ListTypes).includes(node.type.name)) return node
+  }
+}
+
+function trimSelection(doc, from, to) {
+  while (from < to) {
+    const $to = doc.resolve(to)
+    if (isBreak($to.nodeBefore)) {
+      to--
+      continue
+    }
+    if ($to.parentOffset > 0) break
+    const previous = Selection.findFrom(doc.resolve($to.before()), -1, true)
+    if (!previous || previous.from < from) break
+    to = previous.from
+  }
+
+  while (from < to) {
+    const $from = doc.resolve(from)
+    if (isBreak($from.nodeAfter)) {
+      from++
+      continue
+    }
+    if ($from.parentOffset < $from.parent.content.size) break
+    const next = Selection.findFrom(doc.resolve($from.after()), 1, true)
+    if (!next || next.from > to) break
+    from = next.from
+  }
+
+  return { from, to }
+}
+
+function splitSelectedLines(tr, commandKey) {
+  const { selection, doc } = tr
+  if (!(selection instanceof TextSelection)) return false
+
+  const { from, to } = trimSelection(doc, selection.from, selection.to)
+  const $from = doc.resolve(from)
+  const $to = doc.resolve(to)
+
+  const listType = ListTypes[commandKey]
+  const list = listType && closestList($from)
+  if (list && list.type.name !== listType) return false
+
+  const breaks = new Set()
+  let before
+  $from.parent.forEach((node, offset) => {
+    const pos = $from.start() + offset
+    if (isBreak(node) && pos < from) before = pos
+  })
+  if (before !== undefined) breaks.add(before)
+
+  if (listType)
+    doc.nodesBetween(from, to, (node, pos) => {
+      if (isBreak(node) && pos >= from && pos < to) breaks.add(pos)
+    })
+
+  let after
+  $to.parent.forEach((node, offset) => {
+    const pos = $to.start() + offset
+    if (after === undefined && isBreak(node) && pos >= to) after = pos
+  })
+  if (after !== undefined) breaks.add(after)
+
+  if (!breaks.size && from === selection.from && to === selection.to) return false
+
+  const mapFrom = tr.steps.length
+  Array.from(breaks)
+    .sort((a, b) => b - a)
+    .forEach(pos => {
+      const $after = tr.doc.resolve(pos + 1)
+      const inListItem = $after.depth > 1 && $after.node(-1).type.name === 'listItem'
+      const depth = inListItem && canSplit(tr.doc, pos + 1, 2) ? 2 : 1
+      if (canSplit(tr.doc, pos + 1, depth)) tr.split(pos + 1, depth).delete(pos, pos + 1)
+    })
+
+  const mapping = tr.mapping.slice(mapFrom)
+  tr.setSelection(
+    TextSelection.between(tr.doc.resolve(mapping.map(from)), tr.doc.resolve(mapping.map(to))),
+  )
+  return true
+}
+
+export function isLineActive(state, name, attributes) {
+  const { selection, doc, schema } = state
+  if (!(selection instanceof TextSelection)) return isActive(state, name, attributes)
+
+  const { from, to } = trimSelection(doc, selection.from, selection.to)
+  return isActive({ doc, schema, selection: TextSelection.create(doc, from, to) }, name, attributes)
+}
+
+export function runLineCommand(editor, commandKey, commandProps) {
+  const { state } = editor
+  const { tr } = state
+
+  if (!splitSelectedLines(tr, commandKey))
+    return editor.chain().focus()[commandKey](commandProps).run()
+
+  const split = EditorState.create({
+    schema: state.schema,
+    doc: tr.doc,
+    selection: tr.selection,
+    plugins: state.plugins,
+  })
+  const { tr: commandTr } = split
+  const ok = new CommandManager({ editor, state: split })
+    .createChain(commandTr)
+    [commandKey](commandProps)
+    .run()
+  if (!ok) return false
+
+  commandTr.steps.forEach(step => tr.step(step))
+  tr.setSelection(Selection.fromJSON(tr.doc, commandTr.selection.toJSON()))
+  if (commandTr.storedMarksSet) tr.setStoredMarks(commandTr.storedMarks)
+
+  editor.view.dispatch(tr)
+  editor.commands.focus()
+  return true
+}
+
+export const LineShortcuts = Extension.create({
+  name: 'lineShortcuts',
+  priority: 1001,
+
+  addKeyboardShortcuts() {
+    const heading = this.editor.extensionManager.extensions.find(e => e.name === 'heading')
+    const shortcuts = {
+      'Mod-Shift-8': () => runLineCommand(this.editor, 'toggleBulletList'),
+      'Mod-Shift-7': () => runLineCommand(this.editor, 'toggleOrderedList'),
+      'Mod-Alt-0': () => runLineCommand(this.editor, 'setParagraph'),
+    }
+    heading.options.levels.forEach(level => {
+      shortcuts[`Mod-Alt-${level}`] = () => runLineCommand(this.editor, 'toggleHeading', { level })
+    })
+    return shortcuts
+  },
+})