From f76cf24e9dcbb40865ba413660ac80a47d9e0b5f Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Sat, 7 Aug 2021 20:26:39 +0200
Subject: [PATCH] Move wrap to lib to allow editable to use it

---
 ts/editable/editable.ts |  6 ++---
 ts/editable/mathjax.ts  |  3 ++-
 ts/editor/wrap.ts       | 50 ++++++++++-------------------------------
 ts/lib/wrap.ts          | 44 ++++++++++++++++++++++++++++++++++++
 4 files changed, 60 insertions(+), 43 deletions(-)
 create mode 100644 ts/lib/wrap.ts

diff --git a/ts/editable/editable.ts b/ts/editable/editable.ts
index 099874509..a5191cb1a 100644
--- a/ts/editable/editable.ts
+++ b/ts/editable/editable.ts
@@ -5,8 +5,7 @@ import type { DecoratedElement } from "./decorated";
 import { decoratedComponents } from "./decorated";
 import { bridgeCommand } from "lib/bridgecommand";
 import { elementIsBlock, getBlockElement } from "lib/dom";
-// import { inCodable } from "./toolbar";
-// import { wrap } from "./wrap";
+import { wrapInternal } from "lib/wrap";
 
 export function caretToEnd(node: Node): void {
     const range = document.createRange();
@@ -62,8 +61,7 @@ export class Editable extends HTMLElement {
     }
 
     surroundSelection(before: string, after: string): void {
-        // TODO
-        // wrap(before, after);
+        wrapInternal(this.getRootNode() as ShadowRoot, before, after, false);
     }
 
     onEnter(event: KeyboardEvent): void {
diff --git a/ts/editable/mathjax.ts b/ts/editable/mathjax.ts
index b516f55c3..89f963915 100644
--- a/ts/editable/mathjax.ts
+++ b/ts/editable/mathjax.ts
@@ -7,7 +7,8 @@ const parser = new DOMParser();
 
 function getStyle(): HTMLStyleElement {
     const style = document.createElement("style") as HTMLStyleElement;
-    const css = `svg { color: white; font-size: 20px; }`;
+    /* color is set for Maths, fill for the empty icon */
+    const css = `svg { color: white; fill: white; font-size: 20px; }`;
     style.appendChild(document.createTextNode(css));
 
     return style;
diff --git a/ts/editor/wrap.ts b/ts/editor/wrap.ts
index f7c2114a6..12a3f9f3b 100644
--- a/ts/editor/wrap.ts
+++ b/ts/editor/wrap.ts
@@ -5,45 +5,15 @@
 @typescript-eslint/no-non-null-assertion: "off",
  */
 
-import { getCurrentField } from "./helpers";
-import { setFormat } from ".";
-
-function wrappedExceptForWhitespace(text: string, front: string, back: string): string {
-    const match = text.match(/^(\s*)([^]*?)(\s*)$/)!;
-    return match[1] + front + match[2] + back + match[3];
-}
-
-function moveCursorPastPostfix(selection: Selection, postfix: string): void {
-    const range = selection.getRangeAt(0);
-    range.setStart(range.startContainer, range.startOffset - postfix.length);
-    range.collapse(true);
-    selection.removeAllRanges();
-    selection.addRange(range);
-}
-
-function wrapInternal(front: string, back: string, plainText: boolean): void {
-    const currentField = getCurrentField()!;
-    const selection = currentField.getSelection();
-    const range = selection.getRangeAt(0);
-    const content = range.cloneContents();
-    const span = document.createElement("span");
-    span.appendChild(content);
-
-    if (plainText) {
-        const new_ = wrappedExceptForWhitespace(span.innerText, front, back);
-        setFormat("inserttext", new_);
-    } else {
-        const new_ = wrappedExceptForWhitespace(span.innerHTML, front, back);
-        setFormat("inserthtml", new_);
-    }
-
-    if (!span.innerHTML) {
-        moveCursorPastPostfix(selection, back);
-    }
-}
+import { wrapInternal } from "lib/wrap";
+import { getCurrentField } from ".";
 
 export function wrap(front: string, back: string): void {
-    wrapInternal(front, back, false);
+    const editingArea = getCurrentField();
+
+    if (editingArea) {
+        wrapInternal(editingArea.editableContainer.shadowRoot!, front, back, false);
+    }
 }
 
 export function wrapCurrent(front: string, back: string): void {
@@ -53,5 +23,9 @@ export function wrapCurrent(front: string, back: string): void {
 
 /* currently unused */
 export function wrapIntoText(front: string, back: string): void {
-    wrapInternal(front, back, true);
+    const editingArea = getCurrentField();
+
+    if (editingArea) {
+        wrapInternal(editingArea.editableContainer.shadowRoot!, front, back, false);
+    }
 }
diff --git a/ts/lib/wrap.ts b/ts/lib/wrap.ts
new file mode 100644
index 000000000..7f97c7c1b
--- /dev/null
+++ b/ts/lib/wrap.ts
@@ -0,0 +1,44 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+
+/* eslint
+@typescript-eslint/no-non-null-assertion: "off",
+ */
+
+function wrappedExceptForWhitespace(text: string, front: string, back: string): string {
+    const match = text.match(/^(\s*)([^]*?)(\s*)$/)!;
+    return match[1] + front + match[2] + back + match[3];
+}
+
+function moveCursorPastPostfix(selection: Selection, postfix: string): void {
+    const range = selection.getRangeAt(0);
+    range.setStart(range.startContainer, range.startOffset - postfix.length);
+    range.collapse(true);
+    selection.removeAllRanges();
+    selection.addRange(range);
+}
+
+export function wrapInternal(
+    root: Document | ShadowRoot,
+    front: string,
+    back: string,
+    plainText: boolean
+): void {
+    const selection = root.getSelection()!;
+    const range = selection.getRangeAt(0);
+    const content = range.cloneContents();
+    const span = document.createElement("span");
+    span.appendChild(content);
+
+    if (plainText) {
+        const new_ = wrappedExceptForWhitespace(span.innerText, front, back);
+        document.execCommand("inserttext", false, new_);
+    } else {
+        const new_ = wrappedExceptForWhitespace(span.innerHTML, front, back);
+        document.execCommand("inserthtml", false, new_);
+    }
+
+    if (!span.innerHTML) {
+        moveCursorPastPostfix(selection, back);
+    }
+}