Skip to content

Commit

Permalink
Hide delimiters when in live preview mode
Browse files Browse the repository at this point in the history
  • Loading branch information
logonoff committed Oct 20, 2024
1 parent 54bce4e commit b14c4aa
Show file tree
Hide file tree
Showing 2 changed files with 73 additions and 53 deletions.
113 changes: 60 additions & 53 deletions main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -85,59 +85,66 @@ const spoilerDecoration = Decoration.mark({
tagName: "span",
});

const spoilerDelimiterDecoration = Decoration.mark({
class: "inline_spoilers-editor-spoiler-delimiter",
tagName: "span",
});

class SpoilerEditorPlugin implements PluginValue {
decorations: DecorationSet;

constructor(view: EditorView) {
this.decorations = this.buildDecorations(view);
}

update(update: ViewUpdate) {
if (update.docChanged || update.viewportChanged) {
this.decorations = this.buildDecorations(update.view);
}
}

destroy() { }

buildDecorations(view: EditorView): DecorationSet {
const builder = new RangeSetBuilder<Decoration>();
const ranges: { from: number, to: number }[] = [];

for (const { from, to } of view.visibleRanges) {
syntaxTree(view.state).iterate({
from,
to,
enter(node) {
const text = view.state.sliceDoc(node.from, node.to);
let match: RegExpExecArray | null;

while ((match = SPOILER_REGEX.exec(text)) !== null) {
const from = match.index;
const to = from + match[0].length;

const text = view.state.sliceDoc(from, to);

if (!text.startsWith("||") && !text.endsWith("||")) {
continue; // sanity check
}

ranges.push({ from, to });
}
},
});
}

// Sort ranges by `from` position to prevent Codemirror error
ranges.sort((a, b) => a.from - b.from);

// Add sorted ranges to the builder
for (const range of ranges) {
builder.add(range.from, range.to, spoilerDecoration);
}

return builder.finish();
}
decorations: DecorationSet;

constructor(view: EditorView) {
this.decorations = this.buildDecorations(view);
}

update(update: ViewUpdate) {
if (update.docChanged || update.viewportChanged) {
this.decorations = this.buildDecorations(update.view);
}
}

destroy() { }

buildDecorations(view: EditorView): DecorationSet {
const builder = new RangeSetBuilder<Decoration>();
const ranges: { from: number, to: number, isDelimiter: boolean }[] = [];

for (const { from, to } of view.visibleRanges) {
syntaxTree(view.state).iterate({
from,
to,
enter(node) {
const text = view.state.sliceDoc(node.from, node.to);
let match: RegExpExecArray | null;

while ((match = SPOILER_REGEX.exec(text)) !== null) {
const from = match.index;
const to = from + match[0].length;

const text = view.state.sliceDoc(from, to);

if (!text.startsWith("||") && !text.endsWith("||")) {
continue; // sanity check
}

ranges.push({ from, to: from + 2, isDelimiter: true });
ranges.push({ from: to - 2, to, isDelimiter: true });
ranges.push({ from: from + 2, to: to - 2, isDelimiter: false });
}
},
});
}

// Sort ranges by `from` position to prevent Codemirror error
ranges.sort((a, b) => a.from - b.from);

// Add sorted ranges to the builder
for (const range of ranges) {
builder.add(range.from, range.to, range.isDelimiter ? spoilerDelimiterDecoration : spoilerDecoration);
}

return builder.finish();
}
}

const pluginSpec: PluginSpec<SpoilerEditorPlugin> = {
Expand Down Expand Up @@ -196,7 +203,7 @@ class InlineSpoilerPluginSettingsTab extends PluginSettingTab {

new Setting(containerEl)
.setName('Reveal all spoilers')
.setDesc('Always show all spoilers, regardless of whether they are clicked or not.')
.setDesc('Always show all inline spoilers, regardless of whether they are clicked or not.')
.addToggle(toggle => toggle
.setValue(this.plugin.settings.showAllSpoilers)
.onChange(async (value) => {
Expand Down
13 changes: 13 additions & 0 deletions styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -27,3 +27,16 @@ available in the app when your plugin is enabled.
background-color: var(--code-background);
color: var(--code-normal);
}

.inline_spoilers-editor-spoiler-delimiter {
background-color: var(--code-background);
color: var(--text-normal);
}

.is-live-preview .inline_spoilers-editor-spoiler-delimiter {
display: none;
}

.is-live-preview .cm-active .inline_spoilers-editor-spoiler-delimiter {
display: unset;
}

0 comments on commit b14c4aa

Please sign in to comment.