From: Dan Brown <redacted>
Date: Wed, 19 Jan 2022 22:14:09 +0000 (+0000)
Subject: Added radio options for anchor target option
X-Git-Url: http://source.bookstackapp.com/bookstack/commitdiff_plain/e3ead1c11575497d471e25ff34df2311fff245c9?ds=inline

Added radio options for anchor target option
---

diff --git a/resources/js/editor/menu/DialogRadioOptions.js b/resources/js/editor/menu/DialogRadioOptions.js
new file mode 100644
index 000000000..6898ec8d3
--- /dev/null
+++ b/resources/js/editor/menu/DialogRadioOptions.js
@@ -0,0 +1,53 @@
+// ::- Represents a submenu wrapping a group of elements that start
+// hidden and expand to the right when hovered over or tapped.
+import {prefix, randHtmlId} from "./menu-utils";
+import crel from "crelt";
+
+class DialogRadioOptions {
+    /**
+     * Given inputOptions should be keyed by label, with values being values.
+     * Values of empty string will be treated as null.
+     * @param {Object} inputOptions
+     * @param {{label: string, id: string, attrs?: Object, value: function(PmEditorState): string|null}} options
+     */
+    constructor(inputOptions, options) {
+        this.inputOptions = inputOptions;
+        this.options = options || {};
+    }
+
+    // :: (EditorView) → {dom: dom.Node, update: (EditorState) → bool}
+    // Renders the submenu.
+    render(view) {
+
+        const inputs = [];
+        const optionInputLabels = Object.keys(this.inputOptions).map(label => {
+            const inputAttrs = Object.assign({
+                type: "radio",
+                name: this.options.id,
+                value: this.inputOptions[label],
+                class: prefix + '-dialog-radio-option',
+            }, this.options.attrs || {});
+            const input = crel("input", inputAttrs);
+            inputs.push(input);
+            return crel("label", input, label);
+        });
+
+        const optionInputWrap = crel("div", {class: prefix + '-dialog-radio-option-wrap'}, optionInputLabels);
+
+        const label = crel("label", {}, this.options.label);
+        const rowRap = crel("div", {class: prefix + '-dialog-form-row'}, label, optionInputWrap);
+
+        const update = (state) => {
+            const value = this.options.value(state);
+            for (const input of inputs) {
+                input.checked = (input.value === value || (value === null && input.value === ""));
+            }
+            return true;
+        }
+
+        return {dom: rowRap, update}
+    }
+
+}
+
+export default DialogRadioOptions;
\ No newline at end of file
diff --git a/resources/js/editor/menu/item-anchor-button.js b/resources/js/editor/menu/item-anchor-button.js
index 02dfba1ab..f38985a9c 100644
--- a/resources/js/editor/menu/item-anchor-button.js
+++ b/resources/js/editor/menu/item-anchor-button.js
@@ -1,6 +1,7 @@
 import DialogBox from "./DialogBox";
 import DialogForm from "./DialogForm";
 import DialogInput from "./DialogInput";
+import DialogRadioOptions from "./DialogRadioOptions";
 import schema from "../schema";
 
 import {MenuItem} from "./menu";
@@ -38,12 +39,15 @@ function getLinkDialog(submitter, closer) {
                 value: getMarkAttribute(schema.marks.link, 'href'),
             }),
             new DialogInput({
-                label: 'Title',
+                label: 'Hover Label',
                 id: 'title',
                 value: getMarkAttribute(schema.marks.link, 'title'),
             }),
-            new DialogInput({
-                label: 'Target',
+            new DialogRadioOptions({
+                "Same tab or window": "",
+                "New tab or window": "_blank",
+            },{
+                label: 'Behaviour',
                 id: 'target',
                 value: getMarkAttribute(schema.marks.link, 'target'),
             })