diff --git a/ts/editor/ImageHandle.svelte b/ts/editor/ImageHandle.svelte new file mode 100644 index 000000000..68e8f73b8 --- /dev/null +++ b/ts/editor/ImageHandle.svelte @@ -0,0 +1,118 @@ + + + +
+
+
+
+
+
+
+ + diff --git a/ts/editor/ImageHandleContainer.svelte b/ts/editor/ImageHandleContainer.svelte new file mode 100644 index 000000000..c3f2b640d --- /dev/null +++ b/ts/editor/ImageHandleContainer.svelte @@ -0,0 +1,17 @@ + + + +
+ +
diff --git a/ts/editor/change-timer.ts b/ts/editor/change-timer.ts index 0ba729920..033e9f9ed 100644 --- a/ts/editor/change-timer.ts +++ b/ts/editor/change-timer.ts @@ -23,7 +23,9 @@ function clearChangeTimer(): void { export function saveField(currentField: EditingArea, type: "blur" | "key"): void { clearChangeTimer(); - const command = `${type}:${currentField.ord}:${getNoteId()}:${currentField.fieldHTML}` + const command = `${type}:${currentField.ord}:${getNoteId()}:${ + currentField.fieldHTML + }`; bridgeCommand(command); } diff --git a/ts/editor/editing-area.ts b/ts/editor/editing-area.ts index 512b89d37..efc754f93 100644 --- a/ts/editor/editing-area.ts +++ b/ts/editor/editing-area.ts @@ -5,6 +5,8 @@ @typescript-eslint/no-non-null-assertion: "off", */ +import ImageHandleContainer from "./ImageHandleContainer.svelte"; + import type { EditableContainer } from "./editable-container"; import type { Editable } from "./editable"; import type { Codable } from "./codable"; @@ -13,12 +15,14 @@ import { updateActiveButtons } from "./toolbar"; import { bridgeCommand } from "./lib"; import { onInput, onKey, onKeyUp } from "./input-handlers"; import { onFocus, onBlur } from "./focus-handlers"; +import { nightModeKey } from "components/context-keys"; function onCutOrCopy(): void { bridgeCommand("cutOrCopy"); } export class EditingArea extends HTMLDivElement { + imageHandle: ImageHandleContainer; editableContainer: EditableContainer; editable: Editable; codable: Codable; @@ -34,12 +38,32 @@ export class EditingArea extends HTMLDivElement { this.editableContainer.shadowRoot!.appendChild(this.editable); this.appendChild(this.editableContainer); + const context = new Map(); + context.set( + nightModeKey, + document.documentElement.classList.contains("night-mode") + ); + + this.imageHandle = new ImageHandleContainer({ + target: this, + anchor: this.editableContainer, + props: { + hidden: true, + top: 0, + left: 0, + width: 0, + height: 0, + }, + context, + } as any); + this.codable = document.createElement("textarea", { is: "anki-codable", }) as Codable; this.appendChild(this.codable); this.onPaste = this.onPaste.bind(this); + this.showImageHandle = this.showImageHandle.bind(this); } get activeInput(): Editable | Codable { @@ -68,6 +92,7 @@ export class EditingArea extends HTMLDivElement { this.addEventListener("copy", onCutOrCopy); this.addEventListener("oncut", onCutOrCopy); this.addEventListener("mouseup", updateActiveButtons); + this.editable.addEventListener("click", this.showImageHandle); } disconnectedCallback(): void { @@ -80,6 +105,7 @@ export class EditingArea extends HTMLDivElement { this.removeEventListener("copy", onCutOrCopy); this.removeEventListener("oncut", onCutOrCopy); this.removeEventListener("mouseup", updateActiveButtons); + this.editable.removeEventListener("click", this.showImageHandle); } initialize(color: string, content: string): void { @@ -144,6 +170,26 @@ export class EditingArea extends HTMLDivElement { this.activeInput.onPaste(event); } + showImageHandle(event: MouseEvent): void { + if (event.target instanceof HTMLImageElement) { + const image = event.target; + const imageRect = image.getBoundingClientRect(); + const editableRect = this.editable.getBoundingClientRect(); + + (this.imageHandle as any).$set({ + hidden: false, + top: imageRect.top - editableRect.top, + left: imageRect.left - editableRect.left, + width: image.clientWidth, + height: image.clientHeight, + }); + } else { + (this.imageHandle as any).$set({ + hidden: true, + }); + } + } + toggleHtmlEdit(): void { const hadFocus = this.hasFocus(); diff --git a/ts/editor/fields.scss b/ts/editor/fields.scss index acf255509..2d8a9d395 100644 --- a/ts/editor/fields.scss +++ b/ts/editor/fields.scss @@ -15,6 +15,7 @@ } .field { + position: relative; border: 1px solid var(--border); background: var(--frame-bg);