Skip to content

Commit

Permalink
fix (intentionally) bad merge
Browse files Browse the repository at this point in the history
  • Loading branch information
@b-kelly
b-kelly committed Sep 16, 2022
1 parent 0702776 commit a852d7a
Showing 1 changed file with 67 additions and 71 deletions.
138 changes: 67 additions & 71 deletions src/rich-text/node-views/code-block.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,15 +27,7 @@ export class CodeBlockView implements NodeView {
) {
this.dom = document.createElement("div");
this.dom.classList.add("ps-relative", "p0", "ws-normal", "ow-normal");

const rawLanguage = this.getLanguageFromBlock(node);
this.language = rawLanguage;

this.dom.innerHTML = escapeHTML`
<div class="ps-absolute t2 r4 fs-fine pe-none us-none fc-black-300 js-language-indicator" contenteditable=false>${rawLanguage}</div>
<pre class="s-code-block"><code class="content-dom"></code></pre>
`;

this.render(view, getPos);
this.contentDOM = this.dom.querySelector(".content-dom");
this.update(node);
}
Expand All @@ -49,7 +41,7 @@ export class CodeBlockView implements NodeView {
const rawLanguage = this.getLanguageFromBlock(node);

const processorApplies = this.getValidProcessorResult(
rawLanguage,
rawLanguage.raw,
node
);

Expand All @@ -68,7 +60,6 @@ export class CodeBlockView implements NodeView {
const randomId = generateRandomId();

this.dom.innerHTML = escapeHTML`
<div class="ps-absolute t2 r4 fs-fine pe-none us-none fc-black-300 js-language-indicator" contenteditable=false></div>
<div class="d-flex ps-absolute t0 r0 js-processor-toggle">
<label class="flex--item mr4" for="js-editor-toggle-${randomId}">
Edit
Expand All @@ -79,7 +70,8 @@ export class CodeBlockView implements NodeView {
</div>
</div>
<div class="d-none js-processor-view"></div>
<pre class="s-code-block js-code-view js-code-mode"><code class="content-dom"></code></pre>`;
<pre class="s-code-block js-code-view js-code-mode"><code class="content-dom"></code></pre>
<div class="s-select s-select__sm ps-absolute t6 r6 js-language-indicator"><select class="js-lang-select"></select></div>`;

this.contentDOM = this.dom.querySelector(".content-dom");

Expand All @@ -102,6 +94,8 @@ export class CodeBlockView implements NodeView {
})
);
});

this.initializeLanguageSelect(view, getPos);
}

/** Switches the view between editor mode and processor mode */
Expand All @@ -116,61 +110,6 @@ export class CodeBlockView implements NodeView {
}

/** Gets the codeblock language from the node */
private getLanguageFromBlock(node: ProsemirrorNode) {
let autodetectedLanguage = node.attrs
.detectedHighlightLanguage as string;

// add an "auto" dropdown that we can target via JS
const autoOpt = document.createElement("option");
autoOpt.textContent = "auto";
autoOpt.value = "auto";
autoOpt.className = "js-auto-option";
$sel.appendChild(autoOpt);

getLoadedLanguages().forEach((lang) => {
const opt = document.createElement("option");
opt.value = lang;
opt.textContent = lang;
opt.defaultSelected = lang === this.language.raw;
$sel.appendChild(opt);
});

if (typeof getPos !== "function") {
return;
}

// when the dropdown is changed, update the language on the node
$sel.addEventListener("change", (e) => {
e.stopPropagation();

const newLang = $sel.value;

view.dispatch(
view.state.tr.setNodeMarkup(getPos(), null, {
params: newLang === "auto" ? null : newLang,
detectedHighlightLanguage: null,
})
);
});
}

private updateDisplayedLanguage() {
const lang = this.language.raw;
const $sel =
this.dom.querySelector<HTMLSelectElement>(".js-lang-select");
const $auto = $sel.querySelector(".js-auto-option");

if (this.language.autodetected) {
$sel.value = "auto";
$auto.textContent = _t("nodes.codeblock_lang_auto", {
lang,
});
} else {
$sel.value = lang;
$auto.textContent = _t("nodes.codeblock_auto");
}
}

private getLanguageFromBlock(node: ProsemirrorNode) {
const autodetectedLanguage = node.attrs
.detectedHighlightLanguage as string;
Expand All @@ -182,11 +121,13 @@ export class CodeBlockView implements NodeView {
}

/** Updates the edit/code view */
private updateCodeBlock(rawLanguage: string) {
if (this.language !== rawLanguage) {
this.dom.querySelector(".js-language-indicator").textContent =
rawLanguage;
private updateCodeBlock(rawLanguage: CodeBlockView["language"]) {
if (this.language?.raw !== rawLanguage.raw) {
this.dom.querySelector<HTMLSelectElement>(
".js-language-indicator"
).value = rawLanguage.raw;
this.language = rawLanguage;
this.updateDisplayedLanguage();
}
}

Expand Down Expand Up @@ -245,4 +186,59 @@ export class CodeBlockView implements NodeView {

return processors;
}

private initializeLanguageSelect(view: EditorView, getPos: getPosParam) {
const $sel =
this.dom.querySelector<HTMLSelectElement>(".js-lang-select");

// add an "auto" dropdown that we can target via JS
const autoOpt = document.createElement("option");
autoOpt.textContent = "auto";
autoOpt.value = "auto";
autoOpt.className = "js-auto-option";
$sel.appendChild(autoOpt);

getLoadedLanguages().forEach((lang) => {
const opt = document.createElement("option");
opt.value = lang;
opt.textContent = lang;
opt.defaultSelected = lang === this.language?.raw;
$sel.appendChild(opt);
});

if (typeof getPos !== "function") {
return;
}

// when the dropdown is changed, update the language on the node
$sel.addEventListener("change", (e) => {
e.stopPropagation();

const newLang = $sel.value;

view.dispatch(
view.state.tr.setNodeMarkup(getPos(), null, {
params: newLang === "auto" ? null : newLang,
detectedHighlightLanguage: null,
})
);
});
}

private updateDisplayedLanguage() {
const lang = this.language?.raw;
const $sel =
this.dom.querySelector<HTMLSelectElement>(".js-lang-select");
const $auto = $sel.querySelector(".js-auto-option");

if (this.language?.autodetected) {
$sel.value = "auto";
$auto.textContent = _t("nodes.codeblock_lang_auto", {
lang,
});
} else {
$sel.value = lang;
$auto.textContent = _t("nodes.codeblock_auto");
}
}
}

0 comments on commit a852d7a

Please sign in to comment.