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);