Skip to content

Commit 961e180

Browse files
prathamVaidyaprathamVaidya
committed
build: 1.0.1
1 parent ace7070 commit 961e180

File tree

3 files changed

+58
-47
lines changed

3 files changed

+58
-47
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "supercode-tinymce-plugin",
3-
"version": "1.0.0",
3+
"version": "1.0.1",
44
"description": "Opensource and Powerful Source Code editor for TinyMCE. Also enables more than just HTML editing enabling Markdown Editing or any source code editing.",
55
"main": "index.js",
66
"scripts": {

‎supercode/plugin.js‎

Lines changed: 27 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
return false;
5151
}
5252

53-
let editorWidth = 0, originalHeader, isScreenSizeChanged = true, session;
53+
let editorWidth = 0, originalHeader, isScreenSizeChanged = false, session;
5454

5555

5656
let Config = {
@@ -119,7 +119,8 @@
119119
throw new Error("Supercode Icon name is invalid");
120120
}
121121
}
122-
122+
123+
// Builds ace editor only on the first run
123124
const buildAceEditor = (view) => {
124125
// Attach Ace Editor to shadow dom to prevent tinymce css affecting it
125126
view.attachShadow({mode: 'open'})
@@ -160,11 +161,10 @@
160161
// add a copy of original header to give original header look
161162
const newHeader = originalHeader.cloneNode(true);
162163
newHeader.style.position = 'relative';
164+
// If menu-bar exists utilize the space to show Title "Source Code Editor"
163165
const menubar = newHeader.querySelector('.tox-menubar');
164166
if(menubar){
165-
menubar.innerHTML = `
166-
<b style='font-size: 14px; font-weight: bold; padding: 9px;'>Source Code Editor</b>
167-
`
167+
menubar.innerHTML = `<b style='font-size: 14px; font-weight: bold; padding: 9px;'>Source Code Editor</b>`
168168
}
169169

170170
// hide all the buttons except supercode button, attach event listener
@@ -203,7 +203,7 @@
203203
div.append(button);
204204
newHeader.append(div);
205205
}
206-
206+
view.innerHTML = ''; // delete any existing header
207207
view.append(newHeader);
208208
}
209209

@@ -251,12 +251,19 @@
251251
const CodeView = {
252252
onShow: (api) => {
253253
const codeView = api.getContainer();
254-
codeView.style.padding = 0;
255-
codeView.style.display = 'flex';
256-
codeView.style.flexDirection = 'column';
254+
255+
// On tinymce size change => resize code view
256+
if(isScreenSizeChanged){
257+
setHeader(codeView.querySelector('.supercode-header'), originalHeader, onSaveHandler);
258+
codeView.querySelector('.supercode-body ').style.width = editorWidth+'px';
259+
}
257260

258-
if(isScreenSizeChanged || codeView.childElementCount === 0){
259-
codeView.innerHTML = `<div class="supercode-header"></div><div class="supercode-body no-tox-style" id="no-tox-style"></div>`
261+
// Only on First time plugin opened => mount view
262+
if(codeView.childElementCount === 0){
263+
codeView.style.padding = 0;
264+
codeView.style.display = 'flex';
265+
codeView.style.flexDirection = 'column';
266+
codeView.innerHTML = `<div class="supercode-header"></div><div class="supercode-body"></div>`
260267

261268
// Ctrl + Space Toggle Shortcut, Escape to Exit Source Code Mode
262269
if(Config.shortcut){
@@ -268,6 +275,7 @@
268275
setMainView(codeView.querySelector('.supercode-body '), editorWidth);
269276
}
270277

278+
// Logic to run every time view opened => update editor content
271279
let content = getSourceCode(editor.getContent());
272280
if(!session){
273281
session = ace.createEditSession(content, `ace/mode/${Config.language}`);
@@ -287,8 +295,13 @@
287295

288296
const startPlugin = function() {
289297
const container = editor.getContainer();
290-
isScreenSizeChanged = editorWidth != container.clientWidth;
298+
299+
if(editorWidth){
300+
isScreenSizeChanged = editorWidth != container.clientWidth;
301+
}
302+
291303
editorWidth = container.clientWidth;
304+
292305
if(isScreenSizeChanged || !originalHeader){
293306
originalHeader = container.querySelector('.tox-editor-header');
294307
}
@@ -311,8 +324,8 @@
311324
return {
312325
getMetadata: function () {
313326
return {
314-
name: "Source Code Editor",
315-
url: ""
327+
name: "Supercode",
328+
url: "https://github.com/prathamVaidya/supercode-tinymce-plugin"
316329
};
317330
}
318331
}

‎supercode/plugin.min.js‎

Lines changed: 30 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
(function() {
22
let i;
3-
const b = (n) => {
4-
const l = {
3+
const S = (n) => {
4+
const c = {
55
"ace-default": {
66
url: "https://cdnjs.cloudflare.com/ajax/libs/ace/1.9.6/ace.js",
77
loaded: !1,
@@ -18,16 +18,16 @@
1818
required: !1
1919
}
2020
};
21-
n.autocomplete && (l["ace-autocomplete"].required = !0), Object.values(l).forEach((d) => {
22-
if (d.loaded)
21+
n.autocomplete && (c["ace-autocomplete"].required = !0), Object.values(c).forEach((l) => {
22+
if (l.loaded)
2323
return;
24-
let c = document.createElement("script");
25-
c.src = d.url, c.type = "text/javascript", document.body.appendChild(c);
24+
let d = document.createElement("script");
25+
d.src = l.url, d.type = "text/javascript", document.body.appendChild(d);
2626
});
27-
}, S = (n) => n.getParam("inline") !== !0, w = function(n) {
28-
if (!S(n))
27+
}, w = (n) => n.getParam("inline") !== !0, x = function(n) {
28+
if (!w(n))
2929
return console.error("Supercode Plugin is not supported in inline mode"), !1;
30-
let l = 0, d, c = !0, u, t = {
30+
let c = 0, l, d = !1, u, t = {
3131
theme: "chrome",
3232
fontSize: 14,
3333
// in px
@@ -43,7 +43,7 @@
4343
aceCss: null,
4444
fontFamily: null
4545
};
46-
const x = (e) => {
46+
const C = (e) => {
4747
const o = e.getParam("supercode");
4848
if (o && typeof o == "object") {
4949
for (const r in o)
@@ -74,7 +74,7 @@
7474
}
7575
if (t.icon = e.ui.registry.getAll().icons[t.iconName], !t.icon)
7676
throw new Error("Supercode Icon name is invalid");
77-
}, C = (e) => {
77+
}, E = (e) => {
7878
if (e.attachShadow({ mode: "open" }), t.aceCss) {
7979
const s = new CSSStyleSheet();
8080
s.replaceSync(t.aceCss), e.shadowRoot.adoptedStyleSheets.push(s);
@@ -85,14 +85,12 @@
8585
o.style.width = "100%", o.style.height = "100%", i = ace.edit(o), i.renderer.attachToShadowRoot();
8686
const r = {};
8787
t.autocomplete && (r.enableLiveAutocompletion = !0), t.fontFamily && (r.fontFamily = t.fontFamily), i.setOptions(r), i.setTheme(`ace/theme/${t.theme}`), i.setFontSize(t.fontSize), i.setShowPrintMargin(!1);
88-
}, E = (e, o, r) => {
88+
}, m = (e, o, r) => {
8989
const s = o.cloneNode(!0);
9090
s.style.position = "relative";
91-
const y = s.querySelector(".tox-menubar");
92-
y && (y.innerHTML = `
93-
<b style='font-size: 14px; font-weight: bold; padding: 9px;'>Source Code Editor</b>
94-
`);
95-
let g = !0;
91+
const g = s.querySelector(".tox-menubar");
92+
g && (g.innerHTML = "<b style='font-size: 14px; font-weight: bold; padding: 9px;'>Source Code Editor</b>");
93+
let b = !0;
9694
if (s.querySelectorAll(".tox-tbtn, .tox-split-button").forEach((a) => {
9795
if (a.getAttribute("data-mce-name") != "supercode") {
9896
if (a.getAttribute("data-mce-name") === "overflow-button") {
@@ -101,51 +99,51 @@
10199
}
102100
a.classList.remove("tox-tbtn--enabled"), a.classList.add("tox-tbtn--disabled"), a.removeAttribute("data-mce-name");
103101
} else
104-
g = !1, a.setAttribute("data-mce-name", "supercode-toggle"), a.classList.add("tox-tbtn--enabled"), a.onclick = r;
105-
}), g) {
102+
b = !1, a.setAttribute("data-mce-name", "supercode-toggle"), a.classList.add("tox-tbtn--enabled"), a.onclick = r;
103+
}), b) {
106104
const a = document.createElement("div");
107105
a.classList = "tox-toolbar__group", a.style.position = "absolute", a.style.right = 0, a.style.height = "100%";
108106
const p = document.createElement("button");
109107
p.classList = "tox-tbtn tox-tbtn--enabled", p.innerHTML = `<span class="tox-icon tox-tbtn__icon-wrap">${t.icon}</span>`, p.onclick = r, a.append(p), s.append(a);
110108
}
111-
e.append(s);
109+
e.innerHTML = "", e.append(s);
112110
}, v = (e, o) => {
113-
e.style.width = o + "px", e.style.height = "100%", e.style.position = "relative", C(e);
111+
e.style.width = o + "px", e.style.height = "100%", e.style.position = "relative", E(e);
114112
};
115-
x(n), b(t);
113+
C(n), S(t);
116114
const f = () => {
117115
n.focus(), n.undoManager.transact(function() {
118116
let e = i.getValue();
119117
t.renderer && (e = t.renderer(e)), n.setContent(e);
120118
}), n.selection.setCursorLocation(), n.nodeChanged(), n.execCommand("ToggleView", !1, "supercode");
121-
}, m = (e) => {
119+
}, h = (e) => {
122120
(e.key === " " && e.ctrlKey || e.key === "Escape") && f();
123121
}, L = (e) => t.parser ? t.parser(e) : html_beautify(e), j = {
124122
onShow: (e) => {
125123
const o = e.getContainer();
126-
o.style.padding = 0, o.style.display = "flex", o.style.flexDirection = "column", (c || o.childElementCount === 0) && (o.innerHTML = '<div class="supercode-header"></div><div class="supercode-body no-tox-style" id="no-tox-style"></div>', t.shortcut && o.addEventListener("keydown", m), E(o.querySelector(".supercode-header"), d, f), v(o.querySelector(".supercode-body "), l));
124+
d && (m(o.querySelector(".supercode-header"), l, f), o.querySelector(".supercode-body ").style.width = c + "px"), o.childElementCount === 0 && (o.style.padding = 0, o.style.display = "flex", o.style.flexDirection = "column", o.innerHTML = '<div class="supercode-header"></div><div class="supercode-body"></div>', t.shortcut && o.addEventListener("keydown", h), m(o.querySelector(".supercode-header"), l, f), v(o.querySelector(".supercode-body "), c));
127125
let r = L(n.getContent());
128126
u || (u = ace.createEditSession(r, `ace/mode/${t.language}`), u.setUseWrapMode(t.wrap), i.setSession(u)), u.setValue(r), i.gotoLine(1 / 0), i.focus();
129127
},
130128
onHide: () => {
131-
t.shortcut && removeEventListener("keydown", m);
129+
t.shortcut && removeEventListener("keydown", h);
132130
}
133-
}, h = function() {
131+
}, y = function() {
134132
const e = n.getContainer();
135-
c = l != e.clientWidth, l = e.clientWidth, (c || !d) && (d = e.querySelector(".tox-editor-header")), n.execCommand("ToggleView", !1, "supercode");
133+
c && (d = c != e.clientWidth), c = e.clientWidth, (d || !l) && (l = e.querySelector(".tox-editor-header")), n.execCommand("ToggleView", !1, "supercode");
136134
};
137135
return n.ui.registry.addView("supercode", j), n.ui.registry.addButton("supercode", {
138136
icon: t.iconName,
139137
tooltip: "Source Code Editor (Ctrl + space)",
140-
onAction: h
141-
}), t.shortcut && n.shortcuts.add("ctrl+32", "Toggles Source Code Editing Mode", h), {
138+
onAction: y
139+
}), t.shortcut && n.shortcuts.add("ctrl+32", "Toggles Source Code Editing Mode", y), {
142140
getMetadata: function() {
143141
return {
144-
name: "Source Code Editor",
145-
url: ""
142+
name: "Supercode",
143+
url: "https://github.com/prathamVaidya/supercode-tinymce-plugin"
146144
};
147145
}
148146
};
149147
};
150-
tinymce.PluginManager.add("supercode", w);
148+
tinymce.PluginManager.add("supercode", x);
151149
})();

0 commit comments

Comments
 (0)