Merge pull request #183 from fantasticit/fix/0908

packages/client/src/thirtypart/kityminder/kity-editor/runtime/input.js

@@ -139,11 +139,21 @@ define(function (require, exports, module) {
       var node = minder.getSelectedNode();
       if (node) {
         var fontSize = node.getData('font-size') || node.getStyle('font-size');
+
+        try {
+          const paths = Array.from(node.rc.node.querySelectorAll('path'));
+          const text = node.rc.node.querySelector('text');
+          const path = paths.find((path) => path.id.includes('outline'));
+          receiverElement.style.backgroundColor = path.getAttribute('fill');
+          receiverElement.style.borderColor = path.getAttribute('stroke');
+          receiverElement.style.color = text.parentElement.getAttribute('fill');
+        } catch (e) {}
         receiverElement.style.fontSize = fontSize + 'px';
         receiverElement.style.minWidth = 0;
         receiverElement.style.minWidth = receiverElement.clientWidth + 'px';
         receiverElement.style.fontWeight = node.getData('font-weight') || '';
         receiverElement.style.fontStyle = node.getData('font-style') || '';
+
         receiverElement.classList.add('input');
         receiverElement.focus();
       }
@@ -377,9 +387,20 @@ define(function (require, exports, module) {
       if (!focusNode) return;
       if (!planed.timer) {
         planed.timer = setTimeout(function () {
-          var box = focusNode.getRenderBox('TextRenderer');
+          var box = null;
+
+          try {
+            const paths = Array.from(node.rc.node.querySelectorAll('path'));
+            const path = paths.find((path) => path.id.includes('outline'));
+            box = path.getBBox();
+          } catch (e) {
+            box = focusNode.getRenderBox('TextRenderer');
+          }
+
           receiverElement.style.left = Math.round(box.x) + 'px';
           receiverElement.style.top = (debug.flaged ? Math.round(box.bottom + 30) : Math.round(box.y)) + 'px';
+          receiverElement.style.minWidth = box.width + 'px';
+          receiverElement.style.minHeight = box.height + 'px';
           //receiverElement.focus();
           planed.timer = 0;
         });

packages/client/src/tiptap/core/all-kit.ts

@@ -59,7 +59,7 @@ import { TrailingNode } from 'tiptap/core/extensions/trailing-node';
 import { Underline } from 'tiptap/core/extensions/underline';
 
 export const DocumentWithTitle = Document.extend({
-  content: 'title block+',
+  content: 'title{1} block+',
 });
 
 export const AllExtensions = [

packages/client/src/tiptap/core/styles/drag.scss

@@ -5,6 +5,7 @@
   width: 16px;
   height: 16px;
   cursor: move;
+  background-color: #fff;
   opacity: 0;
   transition: opacity 0.3s ease-out;
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='1' width='3' height='3' rx='1.5' fill='%23111'/%3E%3Crect x='10' y='1' width='3' height='3' rx='1.5' fill='%23111'/%3E%3Crect x='3' y='6' width='3' height='3' rx='1.5' fill='%23111'/%3E%3Crect x='10' y='6' width='3' height='3' rx='1.5' fill='%23111'/%3E%3Crect x='3' y='11' width='3' height='3' rx='1.5' fill='%23111'/%3E%3Crect x='10' y='11' width='3' height='3' rx='1.5' fill='%23111'/%3E%3C/svg%3E");

packages/client/src/tiptap/core/styles/kityminder.scss

@@ -118,7 +118,6 @@
   width: auto;
   max-width: 300px;
   min-height: 1.4em;
-  padding: 3px 5px;
   margin-top: -5px;
   margin-left: -3px;
   overflow: hidden;
@@ -127,11 +126,9 @@
   word-break: break-all;
   word-wrap: break-word;
   pointer-events: none;
-  background: white;
   border: none;
   outline: none;
   opacity: 0;
-  box-shadow: 0 0 20px rgb(0 0 0 / 50%);
   box-sizing: border-box;
   user-select: text;
 }
@@ -146,7 +143,6 @@
 .km-editor > .receiver.input {
   z-index: 999;
   pointer-events: all;
-  background: white;
   outline: none;
   opacity: 1;
 }

packages/client/src/tiptap/editor/collaboration/kit.ts

@@ -73,7 +73,7 @@ import { markdownToHTML, markdownToProsemirror } from 'tiptap/markdown/markdown-
 import { prosemirrorToMarkdown } from 'tiptap/markdown/prosemirror-to-markdown';
 
 const DocumentWithTitle = Document.extend({
-  content: 'title block+',
+  content: 'title{1} block+',
 });
 
 export { Document };
@@ -117,7 +117,11 @@ export const CollaborationKit = [
   ColorHighlighter,
   Column,
   Columns,
-  Dropcursor,
+  Dropcursor.configure({
+    width: 2,
+    class: 'dropcursor',
+    color: 'skyblue',
+  }),
   Excalidraw,
   EventEmitter,
   Focus,