feat(floating-toolbar): rename config.range to config.target; support…

… node type
lakejs · Oct 17, 2024 · 20ff903 · 20ff903
1 parent f2ad65a
commit 20ff903
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 12 deletions.
diff --git a/src/models/box.ts b/src/models/box.ts
@@ -11,7 +11,6 @@ import { toBase64 } from '../utils/to-base64';
 import { fromBase64 } from '../utils/from-base64';
 import { query } from '../utils/query';
 import { Nodes } from './nodes';
-import { Range } from './range';
 import { FloatingToolbar } from '../ui/floating-toolbar';
 
 const framework = safeTemplate`
@@ -148,10 +147,8 @@ export class Box {
       if (this.toolbar) {
         this.toolbar.unmount();
       }
-      const range = new Range();
-      range.selectNodeContents(this.node);
       this.toolbar = new FloatingToolbar({
-        range,
+        target: this.node,
         items,
       });
       this.toolbar.render();

diff --git a/src/ui/floating-toolbar.ts b/src/ui/floating-toolbar.ts
@@ -1,10 +1,11 @@
 import { editors } from '../storage/editors';
 import { isVisible } from '../utils/is-visible';
+import { Nodes } from '../models/nodes';
 import { Range } from '../models/range';
 import { Toolbar, ToolbarConfig } from './toolbar';
 
 type FloatingToolbarConfig = ToolbarConfig & {
-  range: Range;
+  target: Nodes | Range;
 };
 
 export class FloatingToolbar extends Toolbar {
@@ -13,7 +14,13 @@ export class FloatingToolbar extends Toolbar {
 
   constructor(config: FloatingToolbarConfig) {
     super(config);
-    this.range = config.range;
+    if (config.target instanceof Nodes) {
+      const range = new Range();
+      range.selectNodeContents(config.target);
+      this.range = range;
+    } else {
+      this.range = config.target;
+    }
     this.container.removeClass('lake-toolbar');
     this.container.addClass('lake-popup');
     this.container.addClass('lake-floating-toolbar');

diff --git a/tests/ui/floating-toolbar-ui.test.ts b/tests/ui/floating-toolbar-ui.test.ts
@@ -1,7 +1,6 @@
 import { boxes } from '../../src/storage/boxes';
 import { icons } from '../../src/icons';
 import { query } from '../../src/utils';
-import { Range } from '../../src/models/range';
 import { Box } from '../../src/models/box';
 import { FloatingToolbar } from '../../src/ui/floating-toolbar';
 import { Editor } from '../../src';
@@ -106,10 +105,8 @@ describe('ui / floating-toolbar-ui', () => {
     editor.setValue('<p style="text-align: center;"><lake-box type="inline" name="floatingToolbarUiTestBox"></lake-box></p>');
     const box = new Box(editor.container.find('lake-box'));
     box.render();
-    const range = new Range();
-    range.selectNodeContents(box.node);
     const floatingToolbar = new FloatingToolbar({
-      range,
+      target: box.node,
       items: [
         {
           name: 'open',

diff --git a/tests/ui/floating-toolbar.test.ts b/tests/ui/floating-toolbar.test.ts
@@ -32,7 +32,7 @@ describe('ui / floating-toolbar', () => {
     const range = new Range();
     range.selectNodeContents(editor.container.find('p'));
     const floatingToolbar = new FloatingToolbar({
-      range,
+      target: range,
       items: [
         {
           name: 'open',
@@ -67,7 +67,7 @@ describe('ui / floating-toolbar', () => {
     const range = new Range();
     range.selectNodeContents(editor.container.find('p'));
     const floatingToolbar = new FloatingToolbar({
-      range,
+      target: range,
       items: [
         {
           name: 'align',