Added radio options for anchor target option

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;

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'),
             })