From 1277757ce92ec5cdf90cf3972b32a20c5cb881b8 Mon Sep 17 00:00:00 2001 From: Mostafa Said <94674993+MooseSaeed@users.noreply.github.com> Date: Sun, 3 Apr 2022 12:44:00 +0200 Subject: [PATCH] Added next line button --- public/css/app.css | 3 + public/js/app.js | 152 ++++++++++++-------- public/markdowntoolbar/index.d.ts | 5 + public/markdowntoolbar/index.js | 15 ++ resources/js/components/Markdowntoolbar.vue | 7 + webpack.mix.js | 1 + 6 files changed, 123 insertions(+), 60 deletions(-) diff --git a/public/css/app.css b/public/css/app.css index 1423175..9a5b5c6 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -529,6 +529,9 @@ Ensure the default browser behavior of the `hidden` attribute. .grid { display: grid; } +.hidden { + display: none; +} .h-full { height: 100%; } diff --git a/public/js/app.js b/public/js/app.js index 40a21c1..a4617f2 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -17626,7 +17626,7 @@ __webpack_require__.r(__webpack_exports__); socket: null, stream: null, transcript: [""], - magicKeys: ["apply bold", "apply link", "apply heading", "apply list", "apply bullet list", "apply quotation", "apply coding", "apply table", "apply image", "apply underline", "apply strike through", "apply line divider"], + magicKeys: ["apply bold", "apply link", "apply heading", "apply list", "apply bullet list", "apply quotation", "apply coding", "apply table", "apply image", "apply underline", "apply strike through", "apply line divider", "apply next line"], keyIncluded: false }; }, @@ -17685,6 +17685,9 @@ __webpack_require__.r(__webpack_exports__); makeItDivider: function makeItDivider() { document.querySelector("md-linedivider").click(); }, + makeItNextLine: function makeItNextLine() { + document.querySelector("md-next-line").click(); + }, vocalCommands: function vocalCommands() { if (this.transcript.includes("apply bold")) { this.makeItBold(); @@ -17710,6 +17713,8 @@ __webpack_require__.r(__webpack_exports__); this.makeItStrikethrough(); } else if (this.transcript.includes("apply line divider")) { this.makeItDivider(); + } else if (this.transcript.includes("apply next line")) { + this.makeItNextLine(); } }, startTranscript: function startTranscript() { @@ -18514,7 +18519,7 @@ var _hoisted_5 = { "class": "relative" }; -var _hoisted_6 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createStaticVNode)("\"Bold\"Italic\"Link\"Ordered\"Unordered\"Heading\"Quote\"Code\"Table\"Image\"Underline\"Strikethrough\"Line", 1); +var _hoisted_6 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createStaticVNode)("\"Bold\"Italic\"Link\"Ordered\"Unordered\"Heading\"Quote\"Code\"Table\"Image\"Underline\"Strikethrough\"Line", 1); function render(_ctx, _cache, $props, $setup, $data, $options) { var _component_Stoprecroding = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Stoprecroding"); @@ -19360,7 +19365,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o = function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } -var buttonSelectors = ["[data-md-button]", "md-header", "md-bold", "md-italic", "md-quote", "md-code", "md-link", "md-image", "md-unordered-list", "md-ordered-list", "md-task-list", "md-mention", "md-ref", "md-strikethrough", "md-table", "md-underline", "md-linedivider"]; +var buttonSelectors = ["[data-md-button]", "md-header", "md-bold", "md-italic", "md-quote", "md-code", "md-link", "md-image", "md-unordered-list", "md-ordered-list", "md-task-list", "md-mention", "md-ref", "md-strikethrough", "md-table", "md-underline", "md-linedivider", "md-next-line"]; function getButtons(toolbar) { var els = []; @@ -19662,22 +19667,49 @@ if (!window.customElements.get("md-table")) { window.customElements.define("md-table", MarkdownTableButtonElement); } -var MarkdownUnderlineButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen9) { - _inherits(MarkdownUnderlineButtonElement, _MarkdownButtonElemen9); +var MarkdownNextLineButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen9) { + _inherits(MarkdownNextLineButtonElement, _MarkdownButtonElemen9); - var _super10 = _createSuper(MarkdownUnderlineButtonElement); + var _super10 = _createSuper(MarkdownNextLineButtonElement); - function MarkdownUnderlineButtonElement() { + function MarkdownNextLineButtonElement() { var _this10; - _classCallCheck(this, MarkdownUnderlineButtonElement); + _classCallCheck(this, MarkdownNextLineButtonElement); _this10 = _super10.call(this); styles.set(_assertThisInitialized(_this10), { + prefix: "\n", + suffix: "", + surroundWithNewlines: false + }); + return _this10; + } + + return _createClass(MarkdownNextLineButtonElement); +}(MarkdownButtonElement); + +if (!window.customElements.get("md-next-line")) { + window.MarkdownNextLineButtonElement = MarkdownNextLineButtonElement; + window.customElements.define("md-next-line", MarkdownNextLineButtonElement); +} + +var MarkdownUnderlineButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen10) { + _inherits(MarkdownUnderlineButtonElement, _MarkdownButtonElemen10); + + var _super11 = _createSuper(MarkdownUnderlineButtonElement); + + function MarkdownUnderlineButtonElement() { + var _this11; + + _classCallCheck(this, MarkdownUnderlineButtonElement); + + _this11 = _super11.call(this); + styles.set(_assertThisInitialized(_this11), { prefix: "", suffix: "" }); - return _this10; + return _this11; } return _createClass(MarkdownUnderlineButtonElement); @@ -19688,22 +19720,22 @@ if (!window.customElements.get("md-underline")) { window.customElements.define("md-underline", MarkdownUnderlineButtonElement); } -var MarkdownLinedividerButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen10) { - _inherits(MarkdownLinedividerButtonElement, _MarkdownButtonElemen10); +var MarkdownLinedividerButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen11) { + _inherits(MarkdownLinedividerButtonElement, _MarkdownButtonElemen11); - var _super11 = _createSuper(MarkdownLinedividerButtonElement); + var _super12 = _createSuper(MarkdownLinedividerButtonElement); function MarkdownLinedividerButtonElement() { - var _this11; + var _this12; _classCallCheck(this, MarkdownLinedividerButtonElement); - _this11 = _super11.call(this); - styles.set(_assertThisInitialized(_this11), { + _this12 = _super12.call(this); + styles.set(_assertThisInitialized(_this12), { prefix: "---", surroundWithNewlines: true }); - return _this11; + return _this12; } return _createClass(MarkdownLinedividerButtonElement); @@ -19714,23 +19746,23 @@ if (!window.customElements.get("md-linedivider")) { window.customElements.define("md-linedivider", MarkdownLinedividerButtonElement); } -var MarkdownUnorderedListButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen11) { - _inherits(MarkdownUnorderedListButtonElement, _MarkdownButtonElemen11); +var MarkdownUnorderedListButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen12) { + _inherits(MarkdownUnorderedListButtonElement, _MarkdownButtonElemen12); - var _super12 = _createSuper(MarkdownUnorderedListButtonElement); + var _super13 = _createSuper(MarkdownUnorderedListButtonElement); function MarkdownUnorderedListButtonElement() { - var _this12; + var _this13; _classCallCheck(this, MarkdownUnorderedListButtonElement); - _this12 = _super12.call(this); - styles.set(_assertThisInitialized(_this12), { + _this13 = _super13.call(this); + styles.set(_assertThisInitialized(_this13), { prefix: "- ", multiline: true, unorderedList: true }); - return _this12; + return _this13; } return _createClass(MarkdownUnorderedListButtonElement); @@ -19741,23 +19773,23 @@ if (!window.customElements.get("md-unordered-list")) { window.customElements.define("md-unordered-list", MarkdownUnorderedListButtonElement); } -var MarkdownOrderedListButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen12) { - _inherits(MarkdownOrderedListButtonElement, _MarkdownButtonElemen12); +var MarkdownOrderedListButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen13) { + _inherits(MarkdownOrderedListButtonElement, _MarkdownButtonElemen13); - var _super13 = _createSuper(MarkdownOrderedListButtonElement); + var _super14 = _createSuper(MarkdownOrderedListButtonElement); function MarkdownOrderedListButtonElement() { - var _this13; + var _this14; _classCallCheck(this, MarkdownOrderedListButtonElement); - _this13 = _super13.call(this); - styles.set(_assertThisInitialized(_this13), { + _this14 = _super14.call(this); + styles.set(_assertThisInitialized(_this14), { prefix: "1. ", multiline: true, orderedList: true }); - return _this13; + return _this14; } return _createClass(MarkdownOrderedListButtonElement); @@ -19768,23 +19800,23 @@ if (!window.customElements.get("md-ordered-list")) { window.customElements.define("md-ordered-list", MarkdownOrderedListButtonElement); } -var MarkdownTaskListButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen13) { - _inherits(MarkdownTaskListButtonElement, _MarkdownButtonElemen13); +var MarkdownTaskListButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen14) { + _inherits(MarkdownTaskListButtonElement, _MarkdownButtonElemen14); - var _super14 = _createSuper(MarkdownTaskListButtonElement); + var _super15 = _createSuper(MarkdownTaskListButtonElement); function MarkdownTaskListButtonElement() { - var _this14; + var _this15; _classCallCheck(this, MarkdownTaskListButtonElement); - _this14 = _super14.call(this); - styles.set(_assertThisInitialized(_this14), { + _this15 = _super15.call(this); + styles.set(_assertThisInitialized(_this15), { prefix: "- [ ] ", multiline: true, surroundWithNewlines: true }); - return _this14; + return _this15; } return _createClass(MarkdownTaskListButtonElement); @@ -19795,22 +19827,22 @@ if (!window.customElements.get("md-task-list")) { window.customElements.define("md-task-list", MarkdownTaskListButtonElement); } -var MarkdownMentionButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen14) { - _inherits(MarkdownMentionButtonElement, _MarkdownButtonElemen14); +var MarkdownMentionButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen15) { + _inherits(MarkdownMentionButtonElement, _MarkdownButtonElemen15); - var _super15 = _createSuper(MarkdownMentionButtonElement); + var _super16 = _createSuper(MarkdownMentionButtonElement); function MarkdownMentionButtonElement() { - var _this15; + var _this16; _classCallCheck(this, MarkdownMentionButtonElement); - _this15 = _super15.call(this); - styles.set(_assertThisInitialized(_this15), { + _this16 = _super16.call(this); + styles.set(_assertThisInitialized(_this16), { prefix: "@", prefixSpace: true }); - return _this15; + return _this16; } return _createClass(MarkdownMentionButtonElement); @@ -19821,22 +19853,22 @@ if (!window.customElements.get("md-mention")) { window.customElements.define("md-mention", MarkdownMentionButtonElement); } -var MarkdownRefButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen15) { - _inherits(MarkdownRefButtonElement, _MarkdownButtonElemen15); +var MarkdownRefButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen16) { + _inherits(MarkdownRefButtonElement, _MarkdownButtonElemen16); - var _super16 = _createSuper(MarkdownRefButtonElement); + var _super17 = _createSuper(MarkdownRefButtonElement); function MarkdownRefButtonElement() { - var _this16; + var _this17; _classCallCheck(this, MarkdownRefButtonElement); - _this16 = _super16.call(this); - styles.set(_assertThisInitialized(_this16), { + _this17 = _super17.call(this); + styles.set(_assertThisInitialized(_this17), { prefix: "#", prefixSpace: true }); - return _this16; + return _this17; } return _createClass(MarkdownRefButtonElement); @@ -19847,23 +19879,23 @@ if (!window.customElements.get("md-ref")) { window.customElements.define("md-ref", MarkdownRefButtonElement); } -var MarkdownStrikethroughButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen16) { - _inherits(MarkdownStrikethroughButtonElement, _MarkdownButtonElemen16); +var MarkdownStrikethroughButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen17) { + _inherits(MarkdownStrikethroughButtonElement, _MarkdownButtonElemen17); - var _super17 = _createSuper(MarkdownStrikethroughButtonElement); + var _super18 = _createSuper(MarkdownStrikethroughButtonElement); function MarkdownStrikethroughButtonElement() { - var _this17; + var _this18; _classCallCheck(this, MarkdownStrikethroughButtonElement); - _this17 = _super17.call(this); - styles.set(_assertThisInitialized(_this17), { + _this18 = _super18.call(this); + styles.set(_assertThisInitialized(_this18), { prefix: "~~", suffix: "~~", trimFirst: true }); - return _this17; + return _this18; } return _createClass(MarkdownStrikethroughButtonElement); @@ -19877,12 +19909,12 @@ if (!window.customElements.get("md-strikethrough")) { var MarkdownToolbarElement = /*#__PURE__*/function (_HTMLElement2) { _inherits(MarkdownToolbarElement, _HTMLElement2); - var _super18 = _createSuper(MarkdownToolbarElement); + var _super19 = _createSuper(MarkdownToolbarElement); function MarkdownToolbarElement() { _classCallCheck(this, MarkdownToolbarElement); - return _super18.call(this); + return _super19.call(this); } _createClass(MarkdownToolbarElement, [{ diff --git a/public/markdowntoolbar/index.d.ts b/public/markdowntoolbar/index.d.ts index e3b80f9..544ad43 100644 --- a/public/markdowntoolbar/index.d.ts +++ b/public/markdowntoolbar/index.d.ts @@ -16,6 +16,7 @@ declare global { MarkdownStrikethroughButtonElement: typeof MarkdownStrikethroughButtonElement; MarkdownTableButtonElement: typeof MarkdownTableButtonElement; MarkdownUnderlineButtonElement: typeof MarkdownUnderlineButtonElement; + MarkdownNextLineButtonElement: typeof MarkdownUnderlineButtonElement; } interface HTMLElementTagNameMap { "markdown-toolbar": MarkdownToolbarElement; @@ -35,6 +36,7 @@ declare global { "md-table": MarkdownTableButtonElement; "md-underline": MarkdownUnderlineButtonElement; "md-linedivider": MarkdownLinedividerButtonElement; + "md-next-line": MarkdownNextLineButtonElement; } } declare class MarkdownButtonElement extends HTMLElement { @@ -90,6 +92,9 @@ declare class MarkdownRefButtonElement extends MarkdownButtonElement { declare class MarkdownStrikethroughButtonElement extends MarkdownButtonElement { constructor(); } +declare class MarkdownNextLineButtonElement extends MarkdownButtonElement { + constructor(); +} declare class MarkdownToolbarElement extends HTMLElement { constructor(); connectedCallback(): void; diff --git a/public/markdowntoolbar/index.js b/public/markdowntoolbar/index.js index 8213e3a..a8c0d6c 100644 --- a/public/markdowntoolbar/index.js +++ b/public/markdowntoolbar/index.js @@ -16,6 +16,7 @@ const buttonSelectors = [ "md-table", "md-underline", "md-linedivider", + "md-next-line", ]; function getButtons(toolbar) { const els = []; @@ -170,6 +171,20 @@ if (!window.customElements.get("md-table")) { window.MarkdownTableButtonElement = MarkdownTableButtonElement; window.customElements.define("md-table", MarkdownTableButtonElement); } +class MarkdownNextLineButtonElement extends MarkdownButtonElement { + constructor() { + super(); + styles.set(this, { + prefix: "\n", + suffix: "", + surroundWithNewlines: false, + }); + } +} +if (!window.customElements.get("md-next-line")) { + window.MarkdownNextLineButtonElement = MarkdownNextLineButtonElement; + window.customElements.define("md-next-line", MarkdownNextLineButtonElement); +} class MarkdownUnderlineButtonElement extends MarkdownButtonElement { constructor() { super(); diff --git a/resources/js/components/Markdowntoolbar.vue b/resources/js/components/Markdowntoolbar.vue index 36ea726..8b41ab5 100644 --- a/resources/js/components/Markdowntoolbar.vue +++ b/resources/js/components/Markdowntoolbar.vue @@ -199,6 +199,7 @@ /> + @@ -231,6 +232,7 @@ export default { "apply underline", "apply strike through", "apply line divider", + "apply next line", ], keyIncluded: false, }; @@ -291,6 +293,9 @@ export default { makeItDivider() { document.querySelector("md-linedivider").click(); }, + makeItNextLine() { + document.querySelector("md-next-line").click(); + }, vocalCommands() { if (this.transcript.includes("apply bold")) { @@ -317,6 +322,8 @@ export default { this.makeItStrikethrough(); } else if (this.transcript.includes("apply line divider")) { this.makeItDivider(); + } else if (this.transcript.includes("apply next line")) { + this.makeItNextLine(); } }, diff --git a/webpack.mix.js b/webpack.mix.js index 94c35b5..35ecd58 100644 --- a/webpack.mix.js +++ b/webpack.mix.js @@ -31,6 +31,7 @@ mix.js("resources/js/app.js", "public/js") "md-underline", "md-strikethrough", "markdown-toolbar", + "md-next-line", "vue-plyr", ].includes(tag), },