From a091d58e36cf467092635dd6c82e01d6d79b7fe9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Santanch=C3=A8?= Date: Wed, 15 May 2019 15:01:45 -0300 Subject: [PATCH] Complete Markdown Editor --- .../author/icons/icon-edit-case-markdown.svg | 132 ++++++++++++++++++ .../author/icons/icon-edit-knot-markdown.svg | 80 +++++++++++ src/adonisjs/public/author/index.html | 5 +- src/adonisjs/public/author/js/author.js | 110 ++++++--------- .../public/dccs/components/dcc-image.js | 59 ++++++++ .../components/editable/dcc-image-editable.js | 18 +++ src/adonisjs/public/infra/basic.js | 7 +- .../public/themes/classic/configuration.html | 1 + src/adonisjs/public/translator/README.md | 29 +++- .../public/translator/expressions/field.png | Bin 0 -> 30518 bytes .../public/translator/item-templates.js | 5 + src/adonisjs/public/translator/translator.js | 87 ++++++++++-- 12 files changed, 455 insertions(+), 78 deletions(-) create mode 100644 src/adonisjs/public/author/icons/icon-edit-case-markdown.svg create mode 100644 src/adonisjs/public/author/icons/icon-edit-knot-markdown.svg create mode 100644 src/adonisjs/public/dccs/components/dcc-image.js create mode 100644 src/adonisjs/public/dccs/components/editable/dcc-image-editable.js create mode 100644 src/adonisjs/public/themes/classic/configuration.html create mode 100644 src/adonisjs/public/translator/expressions/field.png diff --git a/src/adonisjs/public/author/icons/icon-edit-case-markdown.svg b/src/adonisjs/public/author/icons/icon-edit-case-markdown.svg new file mode 100644 index 000000000..758a1be65 --- /dev/null +++ b/src/adonisjs/public/author/icons/icon-edit-case-markdown.svg @@ -0,0 +1,132 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + diff --git a/src/adonisjs/public/author/icons/icon-edit-knot-markdown.svg b/src/adonisjs/public/author/icons/icon-edit-knot-markdown.svg new file mode 100644 index 000000000..de47c6e8b --- /dev/null +++ b/src/adonisjs/public/author/icons/icon-edit-knot-markdown.svg @@ -0,0 +1,80 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + diff --git a/src/adonisjs/public/author/index.html b/src/adonisjs/public/author/index.html index 90ed563a6..d494262f2 100644 --- a/src/adonisjs/public/author/index.html +++ b/src/adonisjs/public/author/index.html @@ -15,6 +15,8 @@ + + @@ -48,7 +50,8 @@
-
+
+
diff --git a/src/adonisjs/public/author/js/author.js b/src/adonisjs/public/author/js/author.js index 09e8edd56..a4ecfa953 100644 --- a/src/adonisjs/public/author/js/author.js +++ b/src/adonisjs/public/author/js/author.js @@ -12,6 +12,8 @@ class AuthorManager { this._knotGenerateCounter = 2; this._translator = new Translator(); + this._translator.authoringRender = true; + this._compiledCase = null; this._knots = null; @@ -27,6 +29,7 @@ class AuthorManager { this._knotSelected = null; this._htmlKnot = null; this._renderSlide = true; + this._renderCase = true; this._editor = null; this.controlEvent = this.controlEvent.bind(this); @@ -67,12 +70,14 @@ class AuthorManager { break; case "control/case/save": this.caseSave(); break; - case "control/case/edit": this.caseEdit(); - break; + case "control/case/markdown": this.caseMarkdown(); + break; case "control/knot/new": this.knotNew(); break; case "control/knot/edit": this.knotEdit(); break; + case "control/knot/markdown": this.knotMarkdown(); + break; case "control/case/play": this.casePlay(); break; case "control/config/edit": this.config(); @@ -148,9 +153,12 @@ class AuthorManager { const caseObj = await MessageBus.ext.request( "data/case/" + this._currentCaseId + "/get"); this._currentCaseName = caseObj.message.name; - + await this._compileShow(caseObj.message.source); + } + + async _compileShow(caseSource) { this._compiledCase = this._translator.compileMarkdown(this._currentCaseId, - caseObj.message.source); + caseSource); this._knots = this._compiledCase.knots; console.log(this._compiledCase); @@ -199,16 +207,30 @@ class AuthorManager { /* * ACTION: control/case/edit */ - async caseEdit() { - let md = this._translator.assembleMarkdown(this._compiledCase); - this._knotPanel.innerHTML = "
"; - this._editor = new Quill("#editor-space", { - theme: "snow", - formats: { - font: "Courier New" - } - }); - this._editor.insertText(0, md); + async caseMarkdown() { + if (this._renderCase) { + this._originalMd = this._translator.assembleMarkdown(this._compiledCase); + this._knotPanel.innerHTML = "
"; + this._editor = new Quill("#editor-space", { + theme: "snow", + formats: { + font: "Courier New" + } + }); + this._editor.insertText(0, this._originalMd); + } else { + if (this._editor != null) { + let editorText = this._editor.getText(); + editorText = editorText.substring(0, editorText.length - 1); + if (!this._originalMd || this._originalMd != editorText) { + this._compileShow(editorText); + delete this._originalMd; + } else + this._renderKnot(); + } else + this._renderKnot(); + } + this._renderCase = !this._renderCase; } /* @@ -242,7 +264,7 @@ class AuthorManager { /* * ACTION: control-edit */ - async knotEdit() { + async knotMarkdown() { if (this._knotSelected != null) { if (this._checkKnotModification()) this._htmlKnot = await this._translator.generateHTML( @@ -351,6 +373,14 @@ class AuthorManager { this._navigator.downTree(knotid); } + knotEdit(topic, message) { + let dccs = document.querySelectorAll("*"); + for (let d = 0; d < dccs.length; d++) + if (dccs[d].tagName.toLowerCase().startsWith("dcc-") && + typeof dccs[d].editDCC === "function") + dccs[d].editDCC(); + } + /* * Check if the knot was modified to update it */ @@ -371,60 +401,10 @@ class AuthorManager { return modified; } - /* - async _generateHTML(knot) { - this._translator.newThemeSet(); - let finalHTML = await this._generateHTMLBuffer(knot); - this._translator.deleteThemeSet(); - return finalHTML; - } - - _newThemeSet() { - this._themeSet = {}; - } - - _deleteThemeSet() { - delete this._themeSet; - } - - async _generateHTMLBuffer(knot) { - let themes = (this._knots[knot].categories) - ? this._knots[knot].categories : ["knot"]; - for (let tp in themes) - if (!this._themeSet[themes[tp]]) { - const templ = await - this._loadTheme(this._currentThemeFamily, themes[tp]); - if (templ != "") - this._themeSet[themes[tp]] = templ; - else { - if (!this._themeSet["knot"]) - this._themeSet["knot"] = await - this._loadTheme(this._currentThemeFamily, "knot"); - this._themeSet[themes[tp]] = this._themeSet["knot"]; - } - } - let finalHTML = this._translator.generateKnotHTML(this._knots[knot]); - for (let tp = themes.length-1; tp >= 0; tp--) - finalHTML = this._themeSet[themes[tp]].replace("{knot}", finalHTML); - - return finalHTML; - } - - async _loadTheme(themeFamily, themeName) { - const themeObj = await MessageBus.ext.request( - "data/theme/" + themeFamily + "." + themeName + "/get"); - return themeObj.message; - } - */ - _renderKnot() { if (this._renderSlide) { this._knotPanel.innerHTML = this._htmlKnot; - let dccs = document.querySelectorAll("*"); - for (let d = 0; d < dccs.length; d++) - if (dccs[d].tagName.toLowerCase().startsWith("dcc-lively-talk")) - dccs[d].editDCC(); } else { this._knotPanel.innerHTML = "
"; this._editor = new Quill('#editor-space', { diff --git a/src/adonisjs/public/dccs/components/dcc-image.js b/src/adonisjs/public/dccs/components/dcc-image.js new file mode 100644 index 000000000..014b45958 --- /dev/null +++ b/src/adonisjs/public/dccs/components/dcc-image.js @@ -0,0 +1,59 @@ +/* Image DCC + **********/ +class DCCImage extends DCCBase { + connectedCallback() { + const templateHTML = "
" + this.alt + "" + : ">
"); + + // building the template + const template = document.createElement("template"); + template.innerHTML = templateHTML; + let shadow = this.attachShadow({mode: "open"}); + shadow.appendChild(template.content.cloneNode(true)); + + this._presentation = shadow.querySelector("#presentation-dcc"); + } + + /* Properties + **********/ + + static get observedAttributes() { + return ["image", "alt"]; + } + + get image() { + return this.getAttribute("image"); + } + + set image(newValue) { + this.setAttribute("image", newValue); + } + + get alt() { + return this.getAttribute("alt"); + } + + set alt(newValue) { + this.setAttribute("alt", newValue); + } + + /* Editable Component */ + editDCC() { + if (!DCCImage.editableCode) { + editableDCCImage(); + DCCImage.editableCode = true; + } + this._editDCC(); + } + + editImage() { + this._editImage(); + } +} + +(function() { + DCCImage.editableCode = false; + customElements.define("dcc-image", DCCImage); +})(); \ No newline at end of file diff --git a/src/adonisjs/public/dccs/components/editable/dcc-image-editable.js b/src/adonisjs/public/dccs/components/editable/dcc-image-editable.js new file mode 100644 index 000000000..9da51cbd6 --- /dev/null +++ b/src/adonisjs/public/dccs/components/editable/dcc-image-editable.js @@ -0,0 +1,18 @@ +/* Image DCC Editable + ********************/ +function editableDCCImage() { + DCCImage.prototype._editImage = function() { + this._presentation.removeEventListener("click", this._editImage); + this._presentation.innerHTML = + ` + `; + }; + + DCCImage.prototype._editDCC = function() { + this._editImage = this._editImage.bind(this); + this._presentation.addEventListener("click", this._editImage); + charImage.style.cursor = "pointer"; + }; + +} \ No newline at end of file diff --git a/src/adonisjs/public/infra/basic.js b/src/adonisjs/public/infra/basic.js index dc25c4d44..e1505e63b 100644 --- a/src/adonisjs/public/infra/basic.js +++ b/src/adonisjs/public/infra/basic.js @@ -60,8 +60,11 @@ class Basic { } } - imageResolver(relativePath) { - return DCCCommonServer.managerAddress + "artifacts/" + relativePath; + imageResolver(path) { + let result = path; + if (!(path.startsWith("http://") || path.startsWith("https://"))) + result = DCCCommonServer.managerAddress + "artifacts/" + path; + return result; } } diff --git a/src/adonisjs/public/themes/classic/configuration.html b/src/adonisjs/public/themes/classic/configuration.html new file mode 100644 index 000000000..ba5a00ad0 --- /dev/null +++ b/src/adonisjs/public/themes/classic/configuration.html @@ -0,0 +1 @@ +
{knot}
\ No newline at end of file diff --git a/src/adonisjs/public/translator/README.md b/src/adonisjs/public/translator/README.md index bb7755e25..fae47f151 100644 --- a/src/adonisjs/public/translator/README.md +++ b/src/adonisjs/public/translator/README.md @@ -112,6 +112,11 @@ Markdown text that does not match to any expression. content: } ``` +### Object to HTML +``` + +``` +This content is further converted to HTML by the compiler. ## Image ### Markdown to Object @@ -148,7 +153,7 @@ Markdown text that does not match to any expression. ``` { type: "option" - subtype: "++" or "**" + subtype: "+" or "*" label: