@live-change/wysiwyg-frontend 0.2.26 → 0.2.28

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 ProseMirrorCollab from "../tiptap/ProseMirrorCollab.js"
   import { sendableSteps, receiveTransaction, getVersion } from 'prosemirror-collab'
   import { Step } from 'prosemirror-transform'
-  import RemoteAuthority from "./RemoteAuthority";
+  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: {
@@ -94,17 +94,7 @@
     }
 
     pre {
-      border-radius: 5px;
-      color: #333;
-    }
-
-    code {
-      display: block;
-      white-space: pre-wrap;
-      font-size: 0.8rem;
-      padding: 0.75rem 1rem;
-      background-color:#e9ecef;
-      color: #495057;
+      overflow-x: auto;
     }
 
     img {

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}/CodeBlockNode.js

@@ -1,6 +1,8 @@
 import { Node } from '@tiptap/core'
 import CodeBlockView from "./CodeBlockView.js"
 
+import "./code-block-node.scss"
+
 function arrowHandler(dir) {
   return (state, dispatch, view) => {
     if (state.selection?.empty && view.endOfTextblock(dir)) {

package/front/src/tiptap/code-block-node.scss

@@ -0,0 +1,3 @@
+.cm-editor {
+  margin: 1em 0px;
+}

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.26",
+  "version": "0.2.28",
   "scripts": {
     "memDev": "lcli memDev --enableSessions --initScript ./init.js --dbAccess",
     "localDevInit": "rm tmp.db; lcli localDev --enableSessions --initScript ./init.js",
@@ -25,16 +25,16 @@
     "@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",
@@ -52,6 +52,7 @@
     "@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-link": "2.0.0-beta.209",
     "@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",
@@ -88,7 +89,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 +101,5 @@
   "author": "",
   "license": "ISC",
   "description": "",
-  "gitHead": "6a0d7e0355b05d54ee98d0df558ae87ae3e48f18"
+  "gitHead": "c38ec9339a0a830bdf18ef717177ef1c7163be14"
 }

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": {},