From a23a612f24a67b8bfb6ba2ec9251d11291c3b710 Mon Sep 17 00:00:00 2001 From: Mostafa Said <94674993+MooseSaeed@users.noreply.github.com> Date: Mon, 4 Apr 2022 00:00:55 +0200 Subject: [PATCH] Vocal commaned FINISHEDDDDDDD --- public/js/app.js | 285 +++++++++++--------- public/markdowntoolbar/index.d.ts | 5 + public/markdowntoolbar/index.js | 16 +- resources/js/components/Markdowntoolbar.vue | 67 +++-- webpack.mix.js | 1 + 5 files changed, 217 insertions(+), 157 deletions(-) diff --git a/public/js/app.js b/public/js/app.js index 0524334..8322033 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", "apply next line"], + magicKeys: ["magic bold", "magic link", "magic heading", "magic list", "magic bullet list", "magic quotation", "magic coding", "magic table", "magic image", "magic underline", "magic strike through", "magic line divider", "magic next line", "magic to the end"], keyIncluded: false }; }, @@ -17688,33 +17688,38 @@ __webpack_require__.r(__webpack_exports__); makeItNextLine: function makeItNextLine() { document.querySelector("md-next-line").click(); }, + makeItToEnd: function makeItToEnd() { + document.querySelector("#myTextArea").value += " "; + }, vocalCommands: function vocalCommands() { - if (this.transcript.includes("apply bold")) { + if (this.transcript.includes("magic bold")) { this.makeItBold(); - } else if (this.transcript.includes("apply link")) { + } else if (this.transcript.includes("magic link")) { this.makeItLink(); - } else if (this.transcript.includes("apply heading")) { + } else if (this.transcript.includes("magic heading")) { this.makeItHeading(); - } else if (this.transcript.includes("apply list")) { + } else if (this.transcript.includes("magic list")) { this.makeItList(); - } else if (this.transcript.includes("apply bullet list")) { + } else if (this.transcript.includes("magic bullet list")) { this.makeItUnorderedList(); - } else if (this.transcript.includes("apply quotation")) { + } else if (this.transcript.includes("magic quotation")) { this.makeItQuotation(); - } else if (this.transcript.includes("apply coding")) { + } else if (this.transcript.includes("magic coding")) { this.makeItCode(); - } else if (this.transcript.includes("apply table")) { + } else if (this.transcript.includes("magic table")) { this.makeItTable(); - } else if (this.transcript.includes("apply image")) { + } else if (this.transcript.includes("magic image")) { this.makeItImage(); - } else if (this.transcript.includes("apply underline")) { + } else if (this.transcript.includes("magic underline")) { this.makeItUnderline(); - } else if (this.transcript.includes("apply strike through")) { + } else if (this.transcript.includes("magic strike through")) { this.makeItStrikethrough(); - } else if (this.transcript.includes("apply line divider")) { + } else if (this.transcript.includes("magic line divider")) { this.makeItDivider(); - } else if (this.transcript.includes("apply next line")) { + } else if (this.transcript.includes("magic next line")) { this.makeItNextLine(); + } else if (this.transcript.includes("magic to the end")) { + this.makeItToEnd(); } }, startTranscript: function startTranscript() { @@ -17744,7 +17749,8 @@ __webpack_require__.r(__webpack_exports__); var transcript = received.channel.alternatives[0].transcript; if (transcript && received.is_final) { - var textarea = document.querySelector("#myTextArea"); + var textarea = document.querySelector("#myTextArea"); // if the key is included in the damn transcript just ignore the transcript + var magicKeys = _this.magicKeys; magicKeys.forEach(function (key) { if (transcript.includes(key)) { @@ -17753,7 +17759,9 @@ __webpack_require__.r(__webpack_exports__); }); if (!_this.keyIncluded) { - _this.insertAtCursor(textarea, transcript + " "); + _this.insertAtCursor(textarea, transcript); + + document.querySelector("md-add-space").click(); } else { _this.transcript = transcript; @@ -18536,7 +18544,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"); @@ -19382,7 +19390,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", "md-next-line"]; +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", "md-add-space"]; function getButtons(toolbar) { var els = []; @@ -19519,23 +19527,48 @@ if (!window.customElements.get("md-bold")) { window.customElements.define("md-bold", MarkdownBoldButtonElement); } -var MarkdownItalicButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen3) { - _inherits(MarkdownItalicButtonElement, _MarkdownButtonElemen3); +var MarkdownAddSpaceButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen3) { + _inherits(MarkdownAddSpaceButtonElement, _MarkdownButtonElemen3); - var _super4 = _createSuper(MarkdownItalicButtonElement); + var _super4 = _createSuper(MarkdownAddSpaceButtonElement); - function MarkdownItalicButtonElement() { + function MarkdownAddSpaceButtonElement() { var _this4; - _classCallCheck(this, MarkdownItalicButtonElement); + _classCallCheck(this, MarkdownAddSpaceButtonElement); _this4 = _super4.call(this); styles.set(_assertThisInitialized(_this4), { + prefix: " " + }); + return _this4; + } + + return _createClass(MarkdownAddSpaceButtonElement); +}(MarkdownButtonElement); + +if (!window.customElements.get("md-add-space")) { + window.MarkdownAddSpaceButtonElement = MarkdownAddSpaceButtonElement; + window.customElements.define("md-add-space", MarkdownAddSpaceButtonElement); +} + +var MarkdownItalicButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen4) { + _inherits(MarkdownItalicButtonElement, _MarkdownButtonElemen4); + + var _super5 = _createSuper(MarkdownItalicButtonElement); + + function MarkdownItalicButtonElement() { + var _this5; + + _classCallCheck(this, MarkdownItalicButtonElement); + + _this5 = _super5.call(this); + styles.set(_assertThisInitialized(_this5), { prefix: "_", suffix: "_", trimFirst: true }); - return _this4; + return _this5; } return _createClass(MarkdownItalicButtonElement); @@ -19546,23 +19579,23 @@ if (!window.customElements.get("md-italic")) { window.customElements.define("md-italic", MarkdownItalicButtonElement); } -var MarkdownQuoteButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen4) { - _inherits(MarkdownQuoteButtonElement, _MarkdownButtonElemen4); +var MarkdownQuoteButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen5) { + _inherits(MarkdownQuoteButtonElement, _MarkdownButtonElemen5); - var _super5 = _createSuper(MarkdownQuoteButtonElement); + var _super6 = _createSuper(MarkdownQuoteButtonElement); function MarkdownQuoteButtonElement() { - var _this5; + var _this6; _classCallCheck(this, MarkdownQuoteButtonElement); - _this5 = _super5.call(this); - styles.set(_assertThisInitialized(_this5), { + _this6 = _super6.call(this); + styles.set(_assertThisInitialized(_this6), { prefix: "> ", multiline: true, surroundWithNewlines: true }); - return _this5; + return _this6; } return _createClass(MarkdownQuoteButtonElement); @@ -19573,24 +19606,24 @@ if (!window.customElements.get("md-quote")) { window.customElements.define("md-quote", MarkdownQuoteButtonElement); } -var MarkdownCodeButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen5) { - _inherits(MarkdownCodeButtonElement, _MarkdownButtonElemen5); +var MarkdownCodeButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen6) { + _inherits(MarkdownCodeButtonElement, _MarkdownButtonElemen6); - var _super6 = _createSuper(MarkdownCodeButtonElement); + var _super7 = _createSuper(MarkdownCodeButtonElement); function MarkdownCodeButtonElement() { - var _this6; + var _this7; _classCallCheck(this, MarkdownCodeButtonElement); - _this6 = _super6.call(this); - styles.set(_assertThisInitialized(_this6), { + _this7 = _super7.call(this); + styles.set(_assertThisInitialized(_this7), { prefix: "`", suffix: "`", blockPrefix: "```", blockSuffix: "```" }); - return _this6; + return _this7; } return _createClass(MarkdownCodeButtonElement); @@ -19601,24 +19634,24 @@ if (!window.customElements.get("md-code")) { window.customElements.define("md-code", MarkdownCodeButtonElement); } -var MarkdownLinkButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen6) { - _inherits(MarkdownLinkButtonElement, _MarkdownButtonElemen6); +var MarkdownLinkButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen7) { + _inherits(MarkdownLinkButtonElement, _MarkdownButtonElemen7); - var _super7 = _createSuper(MarkdownLinkButtonElement); + var _super8 = _createSuper(MarkdownLinkButtonElement); function MarkdownLinkButtonElement() { - var _this7; + var _this8; _classCallCheck(this, MarkdownLinkButtonElement); - _this7 = _super7.call(this); - styles.set(_assertThisInitialized(_this7), { + _this8 = _super8.call(this); + styles.set(_assertThisInitialized(_this8), { prefix: "[", suffix: "](url)", replaceNext: "url", scanFor: "https?://" }); - return _this7; + return _this8; } return _createClass(MarkdownLinkButtonElement); @@ -19629,24 +19662,24 @@ if (!window.customElements.get("md-link")) { window.customElements.define("md-link", MarkdownLinkButtonElement); } -var MarkdownImageButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen7) { - _inherits(MarkdownImageButtonElement, _MarkdownButtonElemen7); +var MarkdownImageButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen8) { + _inherits(MarkdownImageButtonElement, _MarkdownButtonElemen8); - var _super8 = _createSuper(MarkdownImageButtonElement); + var _super9 = _createSuper(MarkdownImageButtonElement); function MarkdownImageButtonElement() { - var _this8; + var _this9; _classCallCheck(this, MarkdownImageButtonElement); - _this8 = _super8.call(this); - styles.set(_assertThisInitialized(_this8), { + _this9 = _super9.call(this); + styles.set(_assertThisInitialized(_this9), { prefix: "![", suffix: "](url)", replaceNext: "url", scanFor: "https?://" }); - return _this8; + return _this9; } return _createClass(MarkdownImageButtonElement); @@ -19657,23 +19690,23 @@ if (!window.customElements.get("md-image")) { window.customElements.define("md-image", MarkdownImageButtonElement); } -var MarkdownTableButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen8) { - _inherits(MarkdownTableButtonElement, _MarkdownButtonElemen8); +var MarkdownTableButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen9) { + _inherits(MarkdownTableButtonElement, _MarkdownButtonElemen9); - var _super9 = _createSuper(MarkdownTableButtonElement); + var _super10 = _createSuper(MarkdownTableButtonElement); function MarkdownTableButtonElement() { - var _this9; + var _this10; _classCallCheck(this, MarkdownTableButtonElement); - _this9 = _super9.call(this); - styles.set(_assertThisInitialized(_this9), { - prefix: "| Cool Header | Cool Header |\n", - suffix: "| ------------ | ----------- |\n| Content | Content |", + _this10 = _super10.call(this); + styles.set(_assertThisInitialized(_this10), { + prefix: "| Cool Header | Cool Header |\n| ------------ | ----------- |\n| Content | Content |", + suffix: "", surroundWithNewlines: true }); - return _this9; + return _this10; } return _createClass(MarkdownTableButtonElement); @@ -19684,23 +19717,23 @@ if (!window.customElements.get("md-table")) { window.customElements.define("md-table", MarkdownTableButtonElement); } -var MarkdownNextLineButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen9) { - _inherits(MarkdownNextLineButtonElement, _MarkdownButtonElemen9); +var MarkdownNextLineButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen10) { + _inherits(MarkdownNextLineButtonElement, _MarkdownButtonElemen10); - var _super10 = _createSuper(MarkdownNextLineButtonElement); + var _super11 = _createSuper(MarkdownNextLineButtonElement); function MarkdownNextLineButtonElement() { - var _this10; + var _this11; _classCallCheck(this, MarkdownNextLineButtonElement); - _this10 = _super10.call(this); - styles.set(_assertThisInitialized(_this10), { + _this11 = _super11.call(this); + styles.set(_assertThisInitialized(_this11), { prefix: "\n", suffix: "", surroundWithNewlines: false }); - return _this10; + return _this11; } return _createClass(MarkdownNextLineButtonElement); @@ -19711,22 +19744,22 @@ if (!window.customElements.get("md-next-line")) { window.customElements.define("md-next-line", MarkdownNextLineButtonElement); } -var MarkdownUnderlineButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen10) { - _inherits(MarkdownUnderlineButtonElement, _MarkdownButtonElemen10); +var MarkdownUnderlineButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen11) { + _inherits(MarkdownUnderlineButtonElement, _MarkdownButtonElemen11); - var _super11 = _createSuper(MarkdownUnderlineButtonElement); + var _super12 = _createSuper(MarkdownUnderlineButtonElement); function MarkdownUnderlineButtonElement() { - var _this11; + var _this12; _classCallCheck(this, MarkdownUnderlineButtonElement); - _this11 = _super11.call(this); - styles.set(_assertThisInitialized(_this11), { + _this12 = _super12.call(this); + styles.set(_assertThisInitialized(_this12), { prefix: "", suffix: "" }); - return _this11; + return _this12; } return _createClass(MarkdownUnderlineButtonElement); @@ -19737,22 +19770,22 @@ if (!window.customElements.get("md-underline")) { window.customElements.define("md-underline", MarkdownUnderlineButtonElement); } -var MarkdownLinedividerButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen11) { - _inherits(MarkdownLinedividerButtonElement, _MarkdownButtonElemen11); +var MarkdownLinedividerButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen12) { + _inherits(MarkdownLinedividerButtonElement, _MarkdownButtonElemen12); - var _super12 = _createSuper(MarkdownLinedividerButtonElement); + var _super13 = _createSuper(MarkdownLinedividerButtonElement); function MarkdownLinedividerButtonElement() { - var _this12; + var _this13; _classCallCheck(this, MarkdownLinedividerButtonElement); - _this12 = _super12.call(this); - styles.set(_assertThisInitialized(_this12), { + _this13 = _super13.call(this); + styles.set(_assertThisInitialized(_this13), { prefix: "---", surroundWithNewlines: true }); - return _this12; + return _this13; } return _createClass(MarkdownLinedividerButtonElement); @@ -19763,23 +19796,23 @@ if (!window.customElements.get("md-linedivider")) { window.customElements.define("md-linedivider", MarkdownLinedividerButtonElement); } -var MarkdownUnorderedListButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen12) { - _inherits(MarkdownUnorderedListButtonElement, _MarkdownButtonElemen12); +var MarkdownUnorderedListButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen13) { + _inherits(MarkdownUnorderedListButtonElement, _MarkdownButtonElemen13); - var _super13 = _createSuper(MarkdownUnorderedListButtonElement); + var _super14 = _createSuper(MarkdownUnorderedListButtonElement); function MarkdownUnorderedListButtonElement() { - var _this13; + var _this14; _classCallCheck(this, MarkdownUnorderedListButtonElement); - _this13 = _super13.call(this); - styles.set(_assertThisInitialized(_this13), { + _this14 = _super14.call(this); + styles.set(_assertThisInitialized(_this14), { prefix: "- ", multiline: true, unorderedList: true }); - return _this13; + return _this14; } return _createClass(MarkdownUnorderedListButtonElement); @@ -19790,23 +19823,23 @@ if (!window.customElements.get("md-unordered-list")) { window.customElements.define("md-unordered-list", MarkdownUnorderedListButtonElement); } -var MarkdownOrderedListButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen13) { - _inherits(MarkdownOrderedListButtonElement, _MarkdownButtonElemen13); +var MarkdownOrderedListButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen14) { + _inherits(MarkdownOrderedListButtonElement, _MarkdownButtonElemen14); - var _super14 = _createSuper(MarkdownOrderedListButtonElement); + var _super15 = _createSuper(MarkdownOrderedListButtonElement); function MarkdownOrderedListButtonElement() { - var _this14; + var _this15; _classCallCheck(this, MarkdownOrderedListButtonElement); - _this14 = _super14.call(this); - styles.set(_assertThisInitialized(_this14), { + _this15 = _super15.call(this); + styles.set(_assertThisInitialized(_this15), { prefix: "1. ", multiline: true, orderedList: true }); - return _this14; + return _this15; } return _createClass(MarkdownOrderedListButtonElement); @@ -19817,23 +19850,23 @@ if (!window.customElements.get("md-ordered-list")) { window.customElements.define("md-ordered-list", MarkdownOrderedListButtonElement); } -var MarkdownTaskListButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen14) { - _inherits(MarkdownTaskListButtonElement, _MarkdownButtonElemen14); +var MarkdownTaskListButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen15) { + _inherits(MarkdownTaskListButtonElement, _MarkdownButtonElemen15); - var _super15 = _createSuper(MarkdownTaskListButtonElement); + var _super16 = _createSuper(MarkdownTaskListButtonElement); function MarkdownTaskListButtonElement() { - var _this15; + var _this16; _classCallCheck(this, MarkdownTaskListButtonElement); - _this15 = _super15.call(this); - styles.set(_assertThisInitialized(_this15), { + _this16 = _super16.call(this); + styles.set(_assertThisInitialized(_this16), { prefix: "- [ ] ", multiline: true, surroundWithNewlines: true }); - return _this15; + return _this16; } return _createClass(MarkdownTaskListButtonElement); @@ -19844,22 +19877,22 @@ if (!window.customElements.get("md-task-list")) { window.customElements.define("md-task-list", MarkdownTaskListButtonElement); } -var MarkdownMentionButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen15) { - _inherits(MarkdownMentionButtonElement, _MarkdownButtonElemen15); +var MarkdownMentionButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen16) { + _inherits(MarkdownMentionButtonElement, _MarkdownButtonElemen16); - var _super16 = _createSuper(MarkdownMentionButtonElement); + var _super17 = _createSuper(MarkdownMentionButtonElement); function MarkdownMentionButtonElement() { - var _this16; + var _this17; _classCallCheck(this, MarkdownMentionButtonElement); - _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(MarkdownMentionButtonElement); @@ -19870,22 +19903,22 @@ if (!window.customElements.get("md-mention")) { window.customElements.define("md-mention", MarkdownMentionButtonElement); } -var MarkdownRefButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen16) { - _inherits(MarkdownRefButtonElement, _MarkdownButtonElemen16); +var MarkdownRefButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen17) { + _inherits(MarkdownRefButtonElement, _MarkdownButtonElemen17); - var _super17 = _createSuper(MarkdownRefButtonElement); + var _super18 = _createSuper(MarkdownRefButtonElement); function MarkdownRefButtonElement() { - var _this17; + var _this18; _classCallCheck(this, MarkdownRefButtonElement); - _this17 = _super17.call(this); - styles.set(_assertThisInitialized(_this17), { + _this18 = _super18.call(this); + styles.set(_assertThisInitialized(_this18), { prefix: "#", prefixSpace: true }); - return _this17; + return _this18; } return _createClass(MarkdownRefButtonElement); @@ -19896,23 +19929,23 @@ if (!window.customElements.get("md-ref")) { window.customElements.define("md-ref", MarkdownRefButtonElement); } -var MarkdownStrikethroughButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen17) { - _inherits(MarkdownStrikethroughButtonElement, _MarkdownButtonElemen17); +var MarkdownStrikethroughButtonElement = /*#__PURE__*/function (_MarkdownButtonElemen18) { + _inherits(MarkdownStrikethroughButtonElement, _MarkdownButtonElemen18); - var _super18 = _createSuper(MarkdownStrikethroughButtonElement); + var _super19 = _createSuper(MarkdownStrikethroughButtonElement); function MarkdownStrikethroughButtonElement() { - var _this18; + var _this19; _classCallCheck(this, MarkdownStrikethroughButtonElement); - _this18 = _super18.call(this); - styles.set(_assertThisInitialized(_this18), { + _this19 = _super19.call(this); + styles.set(_assertThisInitialized(_this19), { prefix: "~~", suffix: "~~", trimFirst: true }); - return _this18; + return _this19; } return _createClass(MarkdownStrikethroughButtonElement); @@ -19926,12 +19959,12 @@ if (!window.customElements.get("md-strikethrough")) { var MarkdownToolbarElement = /*#__PURE__*/function (_HTMLElement2) { _inherits(MarkdownToolbarElement, _HTMLElement2); - var _super19 = _createSuper(MarkdownToolbarElement); + var _super20 = _createSuper(MarkdownToolbarElement); function MarkdownToolbarElement() { _classCallCheck(this, MarkdownToolbarElement); - return _super19.call(this); + return _super20.call(this); } _createClass(MarkdownToolbarElement, [{ diff --git a/public/markdowntoolbar/index.d.ts b/public/markdowntoolbar/index.d.ts index 127e676..ef20cdc 100644 --- a/public/markdowntoolbar/index.d.ts +++ b/public/markdowntoolbar/index.d.ts @@ -17,6 +17,7 @@ declare global { MarkdownTableButtonElement: typeof MarkdownTableButtonElement; MarkdownUnderlineButtonElement: typeof MarkdownUnderlineButtonElement; MarkdownNextLineButtonElement: typeof MarkdownNextLineButtonElement; + MarkdownAddSpaceButtonElement: typeof MarkdownAddSpaceButtonElement; } interface HTMLElementTagNameMap { "markdown-toolbar": MarkdownToolbarElement; @@ -37,6 +38,7 @@ declare global { "md-underline": MarkdownUnderlineButtonElement; "md-linedivider": MarkdownLinedividerButtonElement; "md-next-line": MarkdownNextLineButtonElement; + "md-add-space": MarkdownAddSpaceButtonElement; } } declare class MarkdownButtonElement extends HTMLElement { @@ -44,6 +46,9 @@ declare class MarkdownButtonElement extends HTMLElement { connectedCallback(): void; click(): void; } +declare class MarkdownAddSpaceButtonElement extends MarkdownButtonElement { + constructor(); +} declare class MarkdownHeaderButtonElement extends MarkdownButtonElement { constructor(); } diff --git a/public/markdowntoolbar/index.js b/public/markdowntoolbar/index.js index 0b87688..836fc9d 100644 --- a/public/markdowntoolbar/index.js +++ b/public/markdowntoolbar/index.js @@ -17,6 +17,7 @@ const buttonSelectors = [ "md-underline", "md-linedivider", "md-next-line", + "md-add-space", ]; function getButtons(toolbar) { const els = []; @@ -61,6 +62,7 @@ class MarkdownButtonElement extends HTMLElement { applyStyle(this, style); } } + class MarkdownHeaderButtonElement extends MarkdownButtonElement { constructor() { super(); @@ -88,6 +90,16 @@ if (!window.customElements.get("md-bold")) { window.MarkdownBoldButtonElement = MarkdownBoldButtonElement; window.customElements.define("md-bold", MarkdownBoldButtonElement); } +class MarkdownAddSpaceButtonElement extends MarkdownButtonElement { + constructor() { + super(); + styles.set(this, { prefix: " " }); + } +} +if (!window.customElements.get("md-add-space")) { + window.MarkdownAddSpaceButtonElement = MarkdownAddSpaceButtonElement; + window.customElements.define("md-add-space", MarkdownAddSpaceButtonElement); +} class MarkdownItalicButtonElement extends MarkdownButtonElement { constructor() { super(); @@ -161,8 +173,8 @@ class MarkdownTableButtonElement extends MarkdownButtonElement { constructor() { super(); styles.set(this, { - prefix: "| Cool Header | Cool Header |\n", - suffix: "| ------------ | ----------- |\n| Content | Content |", + prefix: "| Cool Header | Cool Header |\n| ------------ | ----------- |\n| Content | Content |", + suffix: "", surroundWithNewlines: true, }); } diff --git a/resources/js/components/Markdowntoolbar.vue b/resources/js/components/Markdowntoolbar.vue index 507cda5..7d121d2 100644 --- a/resources/js/components/Markdowntoolbar.vue +++ b/resources/js/components/Markdowntoolbar.vue @@ -199,7 +199,8 @@ /> - + + @@ -220,19 +221,20 @@ export default { 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", - "apply next line", + "magic bold", + "magic link", + "magic heading", + "magic list", + "magic bullet list", + "magic quotation", + "magic coding", + "magic table", + "magic image", + "magic underline", + "magic strike through", + "magic line divider", + "magic next line", + "magic to the end", ], keyIncluded: false, }; @@ -296,34 +298,39 @@ export default { makeItNextLine() { document.querySelector("md-next-line").click(); }, + makeItToEnd() { + document.querySelector("#myTextArea").value += " "; + }, vocalCommands() { - if (this.transcript.includes("apply bold")) { + if (this.transcript.includes("magic bold")) { this.makeItBold(); - } else if (this.transcript.includes("apply link")) { + } else if (this.transcript.includes("magic link")) { this.makeItLink(); - } else if (this.transcript.includes("apply heading")) { + } else if (this.transcript.includes("magic heading")) { this.makeItHeading(); - } else if (this.transcript.includes("apply list")) { + } else if (this.transcript.includes("magic list")) { this.makeItList(); - } else if (this.transcript.includes("apply bullet list")) { + } else if (this.transcript.includes("magic bullet list")) { this.makeItUnorderedList(); - } else if (this.transcript.includes("apply quotation")) { + } else if (this.transcript.includes("magic quotation")) { this.makeItQuotation(); - } else if (this.transcript.includes("apply coding")) { + } else if (this.transcript.includes("magic coding")) { this.makeItCode(); - } else if (this.transcript.includes("apply table")) { + } else if (this.transcript.includes("magic table")) { this.makeItTable(); - } else if (this.transcript.includes("apply image")) { + } else if (this.transcript.includes("magic image")) { this.makeItImage(); - } else if (this.transcript.includes("apply underline")) { + } else if (this.transcript.includes("magic underline")) { this.makeItUnderline(); - } else if (this.transcript.includes("apply strike through")) { + } else if (this.transcript.includes("magic strike through")) { this.makeItStrikethrough(); - } else if (this.transcript.includes("apply line divider")) { + } else if (this.transcript.includes("magic line divider")) { this.makeItDivider(); - } else if (this.transcript.includes("apply next line")) { + } else if (this.transcript.includes("magic next line")) { this.makeItNextLine(); + } else if (this.transcript.includes("magic to the end")) { + this.makeItToEnd(); } }, @@ -364,8 +371,9 @@ export default { const textarea = document.querySelector("#myTextArea"); - const magicKeys = this.magicKeys; + // if the key is included in the damn transcript just ignore the transcript + const magicKeys = this.magicKeys; magicKeys.forEach((key) => { if (transcript.includes(key)) { this.keyIncluded = true; @@ -373,7 +381,8 @@ export default { }); if (!this.keyIncluded) { - this.insertAtCursor(textarea, transcript + " "); + this.insertAtCursor(textarea, transcript); + document.querySelector("md-add-space").click(); } else { this.transcript = transcript; this.vocalCommands(); diff --git a/webpack.mix.js b/webpack.mix.js index 35ecd58..b3b4619 100644 --- a/webpack.mix.js +++ b/webpack.mix.js @@ -32,6 +32,7 @@ mix.js("resources/js/app.js", "public/js") "md-strikethrough", "markdown-toolbar", "md-next-line", + "md-add-space", "vue-plyr", ].includes(tag), },