fix toolbar bugs

nathanfaucett · Nov 22, 2022 · 0515bab · 0515bab
1 parent fe6afc2
commit 0515bab
Show file tree

Hide file tree

Showing 10 changed files with 49 additions and 21 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "svelte-slate",
 	"description": "slate svelte view layer",
-	"version": "0.1.69",
+	"version": "0.1.70",
 	"license": "(MIT OR Apache-2.0)",
 	"type": "module",
 	"author": "Nathan Faucett",

diff --git a/src/lib/components/Editable.svelte b/src/lib/components/Editable.svelte
@@ -147,7 +147,6 @@
 
 	const editor = getEditor();
 	const editorContext = getEditorContext();
-	const valueContext = getValueContext();
 	const readOnlyContext = getReadOnlyContext();
 	const focusedContext = getFocusedContext();
 	const decorateContext = getDecorateContext();

diff --git a/src/lib/plugins/CodeElement.svelte b/src/lib/plugins/CodeElement.svelte
@@ -59,7 +59,13 @@
 	}
 
 	export function withCode<T extends ISvelteEditor = ISvelteEditor>(editor: T): T {
-		const { deleteBackward } = editor;
+		const { hasOwnContext } = editor;
+
+		editor.hasOwnContext = (e) =>
+			isCodeElement(e as IBaseElement) || isCodeEditorElement(e as IBaseElement)
+				? false
+				: hasOwnContext(e);
+
 		return editor;
 	}
 
@@ -75,7 +81,11 @@
 
 <script lang="ts">
 	import { Editor, Range, Transforms, Point, type NodeEntry, Text } from 'slate';
-	import { CODE_LINE_TYPE, type ICodeEditorElement } from './CodeEditorElement.svelte';
+	import {
+		CODE_LINE_TYPE,
+		isCodeEditorElement,
+		type ICodeEditorElement
+	} from './CodeEditorElement.svelte';
 	import CodeEditorElement from './CodeEditorElement.svelte';
 	import CodeEditorLeaf from './CodeEditorLeaf.svelte';
 	import { ELEMENT_CONTEXT_KEY, LEAF_CONTEXT_KEY } from '../components/Editable.svelte';

diff --git a/src/lib/plugins/HoveringToolbar.svelte b/src/lib/plugins/HoveringToolbar.svelte
@@ -40,13 +40,12 @@
 	import {
 		getEditorContext,
 		getFocusedContext,
+		getReadOnlyContext,
 		getSelectionContext
 	} from '../components/Slate.svelte';
 	import { Editor, Range, type BaseRange } from 'slate';
 	import Hovering from './Hovering.svelte';
-	import { isCodeElement } from './CodeElement.svelte';
-	import type { IElement } from './Element.svelte';
-	import { isImageElement } from './ImageElement.svelte';
+	import type { IBaseElement } from './Element.svelte';
 
 	export let container: HTMLElement | undefined = undefined;
 	export let threshold = 500;
@@ -55,9 +54,11 @@
 	const editorContext = getEditorContext();
 	const selectionContext = getSelectionContext();
 	const focusContext = getFocusedContext();
+	const readOnlyContext = getReadOnlyContext();
 	$: editor = $editorContext;
 	$: selection = $selectionContext;
 	$: focus = $focusContext;
+	$: readOnly = $readOnlyContext;
 
 	let ref: HTMLElement;
 	$: if (ref) {
@@ -69,27 +70,28 @@
 		) {
 			open = false;
 		} else {
+			checkCanOpen();
+		}
+	}
+
+	function checkCanOpen() {
+		if (!readOnly) {
 			const [match] = Editor.nodes(editor, {
 				at: Editor.unhangRange(editor, editor.selection as BaseRange),
-				match: (e) => isCodeElement(e as IElement) || isImageElement(e as IElement)
+				match: (e) => !editor.hasOwnContext(e as IBaseElement)
 			});
 			if (!match) {
 				open = true;
 			}
 		}
 	}
-
-	function onLongPress() {
-		open = true;
-	}
-
 	let prevContainer: HTMLElement;
 	let removeLongpress: (() => void) | undefined;
 	$: if (container && container !== prevContainer) {
 		if (removeLongpress) {
 			removeLongpress();
 		}
-		removeLongpress = addLongPress(container, threshold, onLongPress);
+		removeLongpress = addLongPress(container, threshold, checkCanOpen);
 		prevContainer = container;
 	}
 </script>

diff --git a/src/lib/plugins/ImageElement.svelte b/src/lib/plugins/ImageElement.svelte
@@ -34,9 +34,11 @@
 		editor: T,
 		options: ImagesOptions = {}
 	): T {
-		const { insertData, isVoid } = editor;
+		const { insertData, isVoid, hasOwnContext } = editor;
 
 		editor.isVoid = (element) => (isImageElement(element as IBaseElement) ? true : isVoid(element));
+		editor.hasOwnContext = (element) =>
+			isImageElement(element as IBaseElement) ? false : hasOwnContext(element);
 
 		editor.insertData = (data) => {
 			const text = data.getData('text/plain');

diff --git a/src/lib/plugins/MathElement.svelte b/src/lib/plugins/MathElement.svelte
@@ -19,14 +19,16 @@
 	}
 
 	export function withMath<T extends ISvelteEditor = ISvelteEditor>(editor: T): T {
-		const { isVoid, isInline, insertBreak } = editor;
+		const { isVoid, isInline, insertBreak, hasOwnContext } = editor;
 
 		editor.isInline = (element) =>
 			isMathElement(element as IElement)
 				? !!(element as IMathElement)['inline']
 				: isInline(element);
 
 		editor.isVoid = (element) => (isMathElement(element as IElement) ? true : isVoid(element));
+		editor.hasOwnContext = (element) =>
+			isMathElement(element as IElement) ? false : hasOwnContext(element);
 
 		editor.insertBreak = () => {
 			if (!editor.selection || !Range.isCollapsed(editor.selection)) {

diff --git a/src/lib/withSvelte.ts b/src/lib/withSvelte.ts
@@ -1,4 +1,4 @@
-import type { BaseEditor } from 'slate';
+import type { BaseEditor, Element } from 'slate';
 import { Editor, Node, Path, type Operation, Transforms, Range } from 'slate';
 import type { Key } from './Key';
 import { EDITOR_TO_KEY_TO_ELEMENT, EDITOR_TO_ON_CHANGE, NODE_TO_KEY } from './weakMaps';
@@ -12,6 +12,7 @@ export interface ISvelteEditor extends BaseEditor {
 	insertTextData: (data: DataTransfer) => boolean;
 	setFragmentData: (data: DataTransfer) => void;
 	hasRange: (editor: ISvelteEditor, range: Range) => boolean;
+	hasOwnContext: (element: Element) => boolean;
 }
 
 export function withSvelte<T extends Editor>(editor: T): T & ISvelteEditor {
@@ -210,5 +211,7 @@ export function withSvelte<T extends Editor>(editor: T): T & ISvelteEditor {
 		onChange();
 	};
 
+	e.hasOwnContext = () => true;
+
 	return e;
 }
diff --git a/src/routes/huge-document/+page.svelte b/src/routes/huge-document/+page.svelte
@@ -82,6 +82,7 @@
 	};
 	let value = createValue(100, 7);
 	let ref: HTMLDivElement;
+	let readOnly = false;
 
 	function onKeyDown(e: KeyboardEvent) {
 		Object.entries(HOTKEYS).forEach(([hotkey, mark]) => {
@@ -102,6 +103,10 @@
 		Source
 	</a>
 </p>
+<div>
+	<label for="readOnly">Read Only?</label>
+	<input name="readOnly" type="checkbox" bind:checked={readOnly} />
+</div>
 
 <Slate {editor} {plugins} bind:value>
 	<HoveringToolbar container={ref}>
@@ -122,7 +127,7 @@
 			<TableButton />
 		</div>
 	</HoveringToolbar>
-	<Editable bind:ref placeholder="Enter some plain text..." {onKeyDown} />
+	<Editable bind:ref placeholder="Enter some plain text..." {readOnly} {onKeyDown} />
 </Slate>
 
 <style>

diff --git a/src/routes/plugins/+page.svelte b/src/routes/plugins/+page.svelte
@@ -174,6 +174,7 @@
 		}
 	];
 	let ref: HTMLDivElement;
+	let readOnly = false;
 
 	function onKeyDown(e: KeyboardEvent) {
 		Object.entries(HOTKEYS).forEach(([hotkey, mark]) => {
@@ -194,6 +195,10 @@
 		Source
 	</a>
 </p>
+<div>
+	<label for="readOnly">Read Only?</label>
+	<input name="readOnly" type="checkbox" bind:checked={readOnly} />
+</div>
 
 <Slate {editor} {plugins} bind:value>
 	<HoveringToolbar container={ref}>
@@ -214,7 +219,7 @@
 			<TableButton />
 		</div>
 	</HoveringToolbar>
-	<Editable bind:ref placeholder="Enter some plain text..." {onKeyDown} />
+	<Editable bind:ref placeholder="Enter some plain text..." {readOnly} {onKeyDown} />
 </Slate>
 
 <style>