@live-change/wysiwyg-frontend 0.2.27 → 0.2.29

package/front/src/DocumentEditorTest.vue

@@ -10,7 +10,7 @@
 
   import DocumentEditor from "./components/DocumentEditor.vue"
   import { ref } from 'vue'
-  import { basicMarks, messageNodes, richEditorNodes, pageNodes } from "./components/contentConfig.js"
+  import { basicMarks, messageNodes, richEditorNodes, pageNodes } from "./tiptap/contentConfig.js"
   import { toRefs } from '@vueuse/core'
 
   const props = defineProps({

package/front/src/DocumentPreviewTest.vue

@@ -14,7 +14,7 @@
     }
   })
 
-  import { basicMarks, messageNodes, richEditorNodes, pageNodes } from "./components/contentConfig.js"
+  import { basicMarks, messageNodes, richEditorNodes, pageNodes } from "./tiptap/contentConfig.js"
 
   const contentConfig = {
     marks: {

package/front/src/EditorWithPreview.vue

@@ -18,7 +18,7 @@
   import ContentView from "./components/ContentView.js"
   import Editor from "./components/Editor.vue"
   import { ref } from 'vue'
-  import { basicMarks, messageNodes, richEditorNodes } from "./components/contentConfig.js"
+  import { basicMarks, messageNodes, richEditorNodes } from "./tiptap/contentConfig.js"
 
   const contentConfig = {
     marks: {

package/front/src/components/DocumentEditor.vue

@@ -43,14 +43,14 @@
   } from 'vue'
   import { toRefs, useDebounceFn } from '@vueuse/core'
   import EditorMenu from "./EditorMenu.vue"
-  import { getExtensions } from "./contentConfigExtensions.js"
-  import { getSchemaSpecFromConfig, serializeSchema } from "./schemaJson.js"
+  import { getExtensions } from "../tiptap/contentConfigExtensions.js"
+  import { getSchemaSpecFromConfig, serializeSchema } from "../tiptap/schemaJson.js"
 
   import { live, path, useApi, inboxReader } from '@live-change/vue3-ssr'
-  import ProseMirrorCollab from "./ProseMirrorCollab.js"
-  import { sendableSteps, receiveTransaction, getVersion } from 'prosemirror-collab'
-  import { Step } from 'prosemirror-transform'
-  import RemoteAuthority from "./RemoteAuthority";
+  import ProseMirrorCollab from "../tiptap/ProseMirrorCollab.js"
+  import { sendableSteps, receiveTransaction, getVersion } from '@tiptap/pm/collab'
+  import { Step } from '@tiptap/pm/transform'
+  import RemoteAuthority from "../tiptap/RemoteAuthority";
 
   const props = defineProps({
     targetType: {

package/front/src/components/Editor.vue

@@ -20,8 +20,8 @@
   import { ref, computed, watch, provide, defineEmits, defineProps } from 'vue'
   import { toRefs } from '@vueuse/core'
   import EditorMenu from "./EditorMenu.vue"
-  import { getExtensions } from "./contentConfigExtensions.js"
-  import { getSchemaSpecFromConfig } from "./schemaJson.js"
+  import { getExtensions } from "../tiptap/contentConfigExtensions.js"
+  import { getSchemaSpecFromConfig } from "../tiptap/schemaJson.js"
 
   const props = defineProps({
     modelValue: {

package/front/src/components/EditorMenu.vue

@@ -20,6 +20,10 @@
                 @click="editor.chain().focus().toggleStrike().run()" />
       </div>
 
+      <Button v-if="config.marks.link" icon="fa-solid fa-link" class="p-button-sm  mr-1 mb-1"
+              :class="{ 'p-button-outlined': !editor.isActive('link')  }"
+              @click="openLinkOverlay" />
+
       <div class="p-buttonset mr-1 mb-1">
         <Button v-if="config.nodes.bulletList" icon="fa-solid fa-list-ul" class="p-button-sm"
                 :class="{ 'p-button-outlined': !editor.isActive('bulletlist')  }"
@@ -108,6 +112,10 @@
       <TemplatesMenu :config="config" @selected="t => handleTemplateSelected(t)" />
     </OverlayPanel>
 
+    <OverlayPanel ref="linkOverlay">
+      <LinkEditor :config="config" :editor="editor" />
+    </OverlayPanel>
+
 <!--    <div class="surface-card p-1 shadow-2" style="width: 450px">
       <h3>components:</h3>
       <TemplatesMenu :config="config" />
@@ -122,6 +130,8 @@
   import Dropdown from "primevue/dropdown"
 
   import TemplatesMenu from "./TemplatesMenu.vue"
+  import LinkEditor from "./LinkEditor.vue"
+
   import { inject, getCurrentInstance, ref, computed } from "vue"
   import { toRefs } from "@vueuse/core"
   import { uploadImage } from "@live-change/image-frontend"
@@ -170,6 +180,11 @@
     //editor.value.chain().focus().setNode('component', { is: component }).run()
   }
 
+  const linkOverlay = ref()
+  function openLinkOverlay(event) {
+    linkOverlay.value.show(event)
+  }
+
   if(typeof window != 'undefined') window.editor = editor.value
 </script>
 

package/front/src/components/LinkEditor.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="flex flex-column w-14rem">
+    <div class="mb-2">
+      <InputText type="text" v-model="linkData.href" placeholder="Href" class="w-full" />
+    </div>
+    <div class="flex flex-row flex-grow-1">
+      <InputText type="text" v-model="linkData.target" placeholder="target" class="w-full flex-grow-1" />
+      <Button v-if="!editor.isActive('link')" @click="addLink"
+              icon="pi pi-plus" class="ml-1 flex-shrink-0" label="Add" />
+      <Button v-else @click="removeLink"
+              icon="pi pi-trash" class="ml-1 flex-shrink-0 p-button-danger" label="Remove" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+  import InputText from "primevue/inputtext"
+  import Button from "primevue/button"
+
+  import { inject, getCurrentInstance, ref, computed, watch } from "vue"
+  import { toRefs } from "@vueuse/core"
+
+  const { editor } = defineProps({
+    editor: {
+      type: Object,
+      required: true
+    }
+  })
+
+  const existingLink = editor.getAttributes('link')
+
+  const linkData = ref({
+    href: '',
+    target: '_blank',
+    ...existingLink
+  })
+
+  watch(linkData, () => {
+    if(editor.isActive('link')) {
+      editor.chain().setLink(linkData.value).run()
+    }
+  }, { deep: true })
+
+  function addLink() {
+    editor.chain().setLink(linkData.value).run()
+  }
+
+  function removeLink() {
+    editor.chain().unsetLink().run()
+  }
+
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/components/TemplatesMenu.vue

@@ -33,7 +33,7 @@
   import InputText from "primevue/inputtext"
 
   import ContentView from "./ContentView.js"
-  import templates from "./templates.js"
+  import templates from "../tiptap/templates.js"
 
   import { ref, computed } from 'vue'
 

package/front/src/{components → tiptap}/CodeBlockView.js

@@ -1,13 +1,12 @@
-import { Selection, TextSelection } from 'prosemirror-state'
-import { Node as PMNode } from 'prosemirror-model';
-import { EditorState as CMState, Transaction as CMTransaction } from '@codemirror/state';
+import { Selection, TextSelection } from '@tiptap/pm/state'
+import { EditorState as CMState } from '@codemirror/state';
 import { EditorView as CMView, keymap as cmKeymap, drawSelection } from '@codemirror/view';
 import {javascript} from "@codemirror/lang-javascript"
 import {defaultKeymap} from "@codemirror/commands"
 import {syntaxHighlighting, defaultHighlightStyle} from "@codemirror/language"
 
-import {exitCode} from "prosemirror-commands"
-import {undo, redo} from "prosemirror-history"
+import {exitCode} from "@tiptap/pm/commands"
+import {undo, redo} from "@tiptap/pm/history"
 
 const computeChange = (oldVal, newVal) => {
   if (oldVal === newVal) {

package/front/src/{components → tiptap}/ProseMirrorCollab.js

@@ -1,5 +1,5 @@
 import { Extension } from '@tiptap/core'
-import { collab } from 'prosemirror-collab'
+import { collab } from '@tiptap/pm/collab'
 
 const ProseMirrorCollab = Extension.create({
   addOptions() {

package/front/src/{components → tiptap}/RemoteAuthority.js

@@ -1,7 +1,7 @@
 import { useApi, inboxReader } from '@live-change/vue3-ssr'
 import { ref } from 'vue'
 
-import { Step } from "prosemirror-transform"
+import { Step } from "@tiptap/pm/transform"
 
 import Debug from "debug"
 const debug = Debug("wysiwyg:collab")

package/front/src/{components → tiptap}/contentConfig.js

@@ -8,7 +8,12 @@ export const basicMarks = {
   bold: (m, c) => h('strong', {}, [ c ]),
   italic: (m, c) => h('em', {}, [ c ]),
   underline: (m, c) => h('u', {}, [ c ]),
-  strike: (m, c) => h('s', {}, [ c ])
+  strike: (m, c) => h('s', {}, [ c ]),
+  link: (m, c) => h('a', {
+    href: m.attrs.href,
+    target: m.attrs.target || '_blank',
+    rel: 'noopener noreferrer nofollow'
+  }, [c]),
 }
 
 export const plainTextNodes = {

package/front/src/{components → tiptap}/contentConfigExtensions.js

@@ -9,6 +9,7 @@ import Blockqoute from "@tiptap/extension-blockquote"
 import BulletList from "@tiptap/extension-bullet-list"
 import OrderedList from "@tiptap/extension-ordered-list"
 import ListItem from "@tiptap/extension-list-item"
+import Link from "@tiptap/extension-link"
 
 import Text from '@tiptap/extension-text'
 
@@ -28,7 +29,10 @@ export const marksExtensions = {
   bold: [Bold],
   italic: [Italic],
   underline: [Underline],
-  strike: [Strike]
+  strike: [Strike],
+  link: [Link.configure({
+    openOnClick: false,
+  })],
 }
 
 export const nodesExtensions = {

package/front/src/{components → tiptap}/schemaJson.js

@@ -1,5 +1,5 @@
 import { getSchema } from "@tiptap/core"
-import { getExtensions } from "./contentConfigExtensions";
+import { getExtensions } from "./contentConfigExtensions.js";
 
 export function schemaTypesMapToObject(map) {
   let obj = {}

package/front/src/{components → tiptap}/templates.js

@@ -1,4 +1,3 @@
-
 export function previewContent(component, title) {
   return [
     {type: 'heading', attrs:{ level: 3 }, content: [{type: 'text', text: title || component.name }]},

package/index.js

@@ -1,17 +1,20 @@
-import * as config from './front/src/components/contentConfig.js'
-import * as extensions from './front/src/components/contentConfigExtensions.js'
+import * as config from './front/src/tiptap/contentConfig.js'
+import * as extensions from './front/src/tiptap/contentConfigExtensions.js'
 export { config, extensions }
 
 import ContentView from "./front/src/components/ContentView.js"
 export { ContentView }
 
+import ImageComponent from "./front/src/tiptap/ImageComponent.vue"
+import ImageNode from "./front/src/tiptap/ImageNode.js"
+import components from "./front/src/tiptap/components.js"
+
+export { ImageComponent, ImageNode }
+
 import DocumentEditor from "./front/src/components/DocumentEditor.vue"
 import Editor from "./front/src/components/Editor.vue"
 import EditorMenu from "./front/src/components/EditorMenu.vue"
-import ImageComponent from "./front/src/components/ImageComponent.vue"
-import ImageNode from "./front/src/components/ImageNode.js"
-export { DocumentEditor, Editor, EditorMenu, ImageComponent, ImageNode }
 
-import components from "./front/src/components/components.js"
+export { DocumentEditor, Editor, EditorMenu }
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/wysiwyg-frontend",
-  "version": "0.2.27",
+  "version": "0.2.29",
   "scripts": {
     "memDev": "lcli memDev --enableSessions --initScript ./init.js --dbAccess",
     "localDevInit": "rm tmp.db; lcli localDev --enableSessions --initScript ./init.js",
@@ -25,40 +25,42 @@
     "@codemirror/language": "^6.1.2",
     "@codemirror/view": "^6.7.1",
     "@fortawesome/fontawesome-free": "^6.2.0",
-    "@live-change/cli": "0.7.10",
-    "@live-change/dao": "0.5.8",
-    "@live-change/dao-vue3": "0.5.8",
-    "@live-change/dao-websocket": "0.5.8",
-    "@live-change/framework": "0.7.10",
-    "@live-change/password-authentication-service": "0.3.11",
-    "@live-change/prosemirror-service": "0.3.11",
-    "@live-change/secret-code-service": "0.3.11",
-    "@live-change/secret-link-service": "0.3.11",
-    "@live-change/session-service": "0.3.11",
+    "@live-change/cli": "0.7.11",
+    "@live-change/dao": "0.5.9",
+    "@live-change/dao-vue3": "0.5.9",
+    "@live-change/dao-websocket": "0.5.9",
+    "@live-change/framework": "0.7.11",
+    "@live-change/password-authentication-service": "0.3.12",
+    "@live-change/prosemirror-service": "0.3.12",
+    "@live-change/secret-code-service": "0.3.12",
+    "@live-change/secret-link-service": "0.3.12",
+    "@live-change/session-service": "0.3.12",
     "@live-change/vue3-components": "0.2.16",
     "@live-change/vue3-ssr": "0.2.16",
-    "@tiptap/core": "^2.0.0-beta.205",
-    "@tiptap/extension-blockquote": "^2.0.0-beta.205",
-    "@tiptap/extension-bold": "^2.0.0-beta.205",
-    "@tiptap/extension-bullet-list": "^2.0.0-beta.205",
-    "@tiptap/extension-code": "^2.0.0-beta.205",
-    "@tiptap/extension-code-block": "^2.0.0-beta.205",
-    "@tiptap/extension-document": "^2.0.0-beta.205",
-    "@tiptap/extension-dropcursor": "^2.0.0-beta.205",
-    "@tiptap/extension-gapcursor": "^2.0.0-beta.205",
-    "@tiptap/extension-hard-break": "^2.0.0-beta.205",
-    "@tiptap/extension-heading": "^2.0.0-beta.205",
-    "@tiptap/extension-highlight": "^2.0.0-beta.205",
-    "@tiptap/extension-history": "^2.0.0-beta.205",
-    "@tiptap/extension-horizontal-rule": "^2.0.0-beta.205",
-    "@tiptap/extension-italic": "^2.0.0-beta.205",
-    "@tiptap/extension-list-item": "^2.0.0-beta.205",
-    "@tiptap/extension-ordered-list": "^2.0.0-beta.205",
-    "@tiptap/extension-paragraph": "^2.0.0-beta.205",
-    "@tiptap/extension-strike": "^2.0.0-beta.205",
-    "@tiptap/extension-text": "^2.0.0-beta.205",
-    "@tiptap/extension-underline": "2.0.0-beta.205",
-    "@tiptap/vue-3": "2.0.0-beta.205",
+    "@tiptap/core": "^2.0.0-beta.217",
+    "@tiptap/extension-blockquote": "^2.0.0-beta.217",
+    "@tiptap/extension-bold": "^2.0.0-beta.217",
+    "@tiptap/extension-bullet-list": "^2.0.0-beta.217",
+    "@tiptap/extension-code": "^2.0.0-beta.217",
+    "@tiptap/extension-code-block": "^2.0.0-beta.217",
+    "@tiptap/extension-document": "^2.0.0-beta.217",
+    "@tiptap/extension-dropcursor": "^2.0.0-beta.217",
+    "@tiptap/extension-gapcursor": "^2.0.0-beta.217",
+    "@tiptap/extension-hard-break": "^2.0.0-beta.217",
+    "@tiptap/extension-heading": "^2.0.0-beta.217",
+    "@tiptap/extension-highlight": "^2.0.0-beta.217",
+    "@tiptap/extension-history": "^2.0.0-beta.217",
+    "@tiptap/extension-horizontal-rule": "^2.0.0-beta.217",
+    "@tiptap/extension-italic": "^2.0.0-beta.217",
+    "@tiptap/extension-link": "2.0.0-beta.217",
+    "@tiptap/extension-list-item": "^2.0.0-beta.217",
+    "@tiptap/extension-ordered-list": "^2.0.0-beta.217",
+    "@tiptap/extension-paragraph": "^2.0.0-beta.217",
+    "@tiptap/extension-strike": "^2.0.0-beta.217",
+    "@tiptap/extension-text": "^2.0.0-beta.217",
+    "@tiptap/extension-underline": "2.0.0-beta.217",
+    "@tiptap/pm": "2.0.0-beta.217",
+    "@tiptap/vue-3": "2.0.0-beta.217",
     "@vueuse/core": "^9.1.0",
     "codeceptjs-assert": "^0.0.5",
     "compression": "^1.7.4",
@@ -68,15 +70,6 @@
     "primeicons": "^6.0.1",
     "primevue": "^3.18.1",
     "prismjs": "^1.28.0",
-    "prosemirror-collab": "^1.3.0",
-    "prosemirror-commands": "^1.3.1",
-    "prosemirror-gapcursor": "^1.3.1",
-    "prosemirror-history": "^1.3.0",
-    "prosemirror-keymap": "^1.2.0",
-    "prosemirror-model": "^1.18.1",
-    "prosemirror-schema-list": "^1.2.2",
-    "prosemirror-state": "^1.4.1",
-    "prosemirror-transform": "^1.7.0",
     "prosemirror-view": "^1.28.2",
     "rollup-plugin-node-builtins": "^2.1.2",
     "rollup-plugin-visualizer": "5.6.0",
@@ -88,7 +81,7 @@
     "vue3-scroll-border": "0.1.4"
   },
   "devDependencies": {
-    "@live-change/codeceptjs-helper": "0.7.10",
+    "@live-change/codeceptjs-helper": "0.7.11",
     "@wdio/selenium-standalone-service": "^7.20.8",
     "codeceptjs": "^3.3.4",
     "generate-password": "1.7.0",
@@ -100,5 +93,5 @@
   "author": "",
   "license": "ISC",
   "description": "",
-  "gitHead": "b37e73f127df32ddccf8e9cb4baa21f79d11a487"
+  "gitHead": "6f0afd50347ad40c3b7ac692140c48ff88b13e98"
 }

package/server/page.documentType.js

@@ -1,5 +1,19 @@
 module.exports = {
   "marks": {
+    "link": {
+      "inclusive": true,
+      "attrs": {
+        "href": {
+          "default": null
+        },
+        "target": {
+          "default": "_blank"
+        },
+        "class": {
+          "default": null
+        }
+      }
+    },
     "bold": {},
     "italic": {},
     "underline": {},

package/server/rich.documentType.js

@@ -1,5 +1,19 @@
 module.exports = {
   "marks": {
+    "link": {
+      "inclusive": true,
+      "attrs": {
+        "href": {
+          "default": null
+        },
+        "target": {
+          "default": "_blank"
+        },
+        "class": {
+          "default": null
+        }
+      }
+    },
     "bold": {},
     "italic": {},
     "underline": {},