();
const tree = syntaxTree(view.state);
const tabSize = view.state.tabSize || 6;
tree.iterate({
enter: (node) => {
if (node.name === "ListItem" || node.name == "Blockquote") {
const line = view.state.doc.lineAt(node.from);
const lineText = line.text;
const match = listMarkerRegex.exec(lineText);
if (match) {
const indentStr = match[1];
const marker = match[2];
// Calculate visual width of indentation
const { width, hasTab } = calculateIndent(indentStr, tabSize);
// +1 for the space after the marker
const markerWidth = marker.length + 1;
// Chrome insists on using tab stops so line indentation needs to be a multiple
// of the tab stop, which also means that we can't align the indented lines with
// the marker :'(
const totalIndent = width + (hasTab ? 0 : markerWidth);
builder.add(line.from, line.from, wrapIndent(totalIndent, hasTab));
}
}
}
})
return builder.finish();
}
}, {
decorations: v => v.decorations,
})
}
export const listIndent = () => {
const { EditorView } = require_codemirror_view();
return [
EditorView.lineWrapping,
createListIndentPlugin()
];
}
================================================
FILE: src/cm6Requires.ts
================================================
import type * as CodeMirrorView from '@codemirror/view';
import type * as CodeMirrorState from '@codemirror/state';
import type * as CodeMirrorLanguage from '@codemirror/language';
// Dynamically imports a CodeMirror 6 library. This is done
// to allow the plugin to start in both CodeMirror 5 and CodeMirror 6
// without import failure errors.
export function require_codemirror_view(): typeof CodeMirrorView {
return require('@codemirror/view');
}
export function require_codemirror_state(): typeof CodeMirrorState {
return require('@codemirror/state');
}
export function require_codemirror_language(): typeof CodeMirrorLanguage {
return require('@codemirror/language');
}
================================================
FILE: src/imageData.ts
================================================
import joplin from 'api';
export async function imageToDataURL(filePath:string, mimeType:string) {
const fs = joplin.require('fs-extra');
const fileBuffer = await fs.readFile(filePath);
const base64String = fileBuffer.toString('base64');
return `data:${mimeType};base64,${base64String}`;
}
================================================
FILE: src/images.test.ts
================================================
import * as ImageHandlers from './images';
const test_text = `
{width=100%}
{width=78px}
![name](https://url.com "title" this is all bad)
some paragr  somethingsom
[space-fish.png](:/40530199c558430d8ea01363748d9657)
[おはいよ](https://www.inmoth.ca/images/envelope.png)
[red.png](file:///home/joplinuser/Pictures/red.png)
some paragr [i1.png](:/d9e191134dad42dda2d94ab3e98d3517) something! [](:/f190a79a355e4bbb86990cb3b55bedb6)som
![]()
something in a paragraphs which is supported by an image
`
const test_html = `
`
const line_cases = [
[1, "space-fish.png", ":/40530199c558430d8ea01363748d9657", null, "100%", "%"],
[2, "おはいよ", "https://www.inmoth.ca/images/envelope.png", null, undefined, undefined],
[3, "red.png", "file:///home/joplinuser/Pictures/red.png", null, undefined, undefined],
[4, "", ":/40530199c558430d8ea", null, undefined, undefined],
[5, "おはいよ", "https://www.inmoth.ca/images/envelope.png", " \"title\"", "78px", "px"],
// The current regex correctly grabs the title, but it doesn't guard against extra bits
[6, "name", "https://url.com", " \"title\" this is all bad", undefined, undefined],
]
describe("Test image line regex matches images that own a line", () => {
const lines = test_text.split("\n");
test.each(line_cases)(
"Line %p matches ",
(line, name, url, title, width, unit) => {
let match = ImageHandlers.image_line_regex.exec(lines[line]);
expect(match).not.toBeNull();
const widthString = width ? `{width=${match[4]}}` : '';
expect(match[0]).toBe(`${widthString}`);
expect(match[1]).toBe(name);
expect(match[2]).toBe(url);
// match[3] is the full match of the {width=?} I won't bother checking it
expect(match[4]).toBe(width);
expect(match[5]).toBe(unit);
}
);
});
describe("Test image line regex does not match anything else", () => {
const lines = test_text.split("\n").concat(test_html.split("\n"));
const cases = Array.from({length: lines.length - line_cases.length}, (_, i) => i+line_cases.length+1)
test.each(cases)(
"Line %p is not a line image",
(line: number) => {
let match = ImageHandlers.image_line_regex.exec(lines[line]);
expect(match).toBeNull();
}
);
});
describe("Test image inline regex matches all images", () => {
const cases = [
["space-fish.png", ":/40530199c558430d8ea01363748d9657", null, "100%", "%"],
["おはいよ", "https://www.inmoth.ca/images/envelope.png", null, undefined, undefined],
["red.png", "file:///home/joplinuser/Pictures/red.png", null, undefined , undefined],
["", ":/40530199c558430d8ea", null, undefined, undefined],
["おはいよ", "https://www.inmoth.ca/images/envelope.png", " \"title\"", "78px", "px"],
// The current regex correctly grabs the title, but it doesn't guard against extra bits
["name", "https://url.com", " \"title\" this is all bad", undefined, undefined],
["i1.png", ":/d9e191134dad42dda2d94ab3e98d3517", null, undefined, undefined],
["", ":/f190a79a355e4bbb86990cb3b55bedb6", null, undefined, undefined],
];
test.each(cases)(
"Matches from ",
(name, url, title, width, unit) => {
let match = ImageHandlers.image_inline_regex.exec(test_text);
expect(match).not.toBeNull();
const widthString = width ? `{width=${match[4]}}` : '';
expect(match[0]).toBe(`${widthString}`);
expect(match[1]).toBe(name);
expect(match[2]).toBe(url);
expect(match[4]).toBe(width);
expect(match[5]).toBe(unit);
}
);
test("There are no more matches", () => {
let match = ImageHandlers.image_inline_regex.exec(test_text);
expect(match).toBeNull();
});
});
describe("Test image html line regex only matches html images that own a line", () => {
const text_lines = test_text.split("\n")
test.each(text_lines)(
"%p is not an html image on it's own line",
(line: string) => {
let match = ImageHandlers.html_image_line_regex.exec(line);
expect(match).toBeNull();
}
);
const html_lines = test_html.split("\n")
test.each(html_lines)(
"%p is an html image on it's own line",
(line: string) => {
let match = ImageHandlers.html_image_line_regex.exec(line);
expect(match).not.toBeNull();
expect(match[0]).toBe(line);
// This is less important because the entire tag is used to generate an image
// So the rest of the match statement is ignored
// In the future this might be changed
// expect(match[1]).toBe('');
}
);
});
const test_link_text = `
{width=100%}
[](https://www.inmoth.ca)
[](https://joplinapp.org)
[{width=78px}](https://www.inmoth.ca)
![name](https://url.com "title" this is all bad)
some paragr  somethingsom
[space-fish.png](:/40530199c558430d8ea01363748d9657)
[おはいよ](https://www.inmoth.ca/images/envelope.png)
[red.png](file:///home/joplinuser/Pictures/red.png)
some paragr [i1.png](:/d9e191134dad42dda2d94ab3e98d3517) something! [](:/f190a79a355e4bbb86990cb3b55bedb6)som
`
const line_link_cases = [
[1, null],
[2, ""],
[3, null],
[4, ""],
[5, "![おはいよ](https://www.inmoth.ca/images/envelope.png \"title\"){width=78px}"],
[6, null],
[7, null],
[8, null],
[9, null],
[10, null],
[11, null],
[12, null],
]
describe("Test image line inside link regex matches only lines with images inside links", () => {
const lines = test_link_text.split("\n");
test.each(line_link_cases)(
"Line %p matches %p",
(line, image) => {
let match = ImageHandlers.image_line_link_regex.exec(lines[line]);
if (image) {
expect(match).not.toBeNull();
expect(match[1]).toBe(image);
} else {
expect(match).toBeNull();
}
}
);
});
================================================
FILE: src/images.ts
================================================
import * as ClickHandlers from './clickHandlers';
import * as Overlay from './overlay';
import { require_codemirror_language } from "./cm6Requires";
export const image_line_regex = /^\s*!\[([^\]]*)\]\((<[^\)]+>|[^)\s]+)[^)]*\)({width=(\d+(px|%)?)})?\s*$/;
export const image_line_link_regex = /^\[(!\[.*)\]\((.*)\)$/;
export const image_inline_regex = /!\[([^\]]*)\]\((<[^\)]+>|[^)\s]+)[^)]*\)({width=(\d+(px|%)?)})?/g;
export const html_image_line_regex = /^\s*]+?)\/?>\s*$/;
// Used to quickly index widgets that will get updated
let allWidgets = {};
export function isSupportedImageMimeType(mime:string) {
return ['image/png', 'image/jpg', 'image/jpeg'].includes(mime.toLowerCase());
}
export function isSupportedOcrMimeType(mime:string) {
return ['application/pdf'].includes(mime.toLowerCase()) || isSupportedImageMimeType(mime);
}
export function onSourceChanged(cm: any, from: number, to: number, context: any) {
if (!cm.state.richMarkdown) return;
if (cm.state.richMarkdown.settings.inlineImages) {
check_lines(cm, from, to, context);
}
}
export function afterSourceChanges(cm: any) {
if (!cm.state.richMarkdown) return;
if (cm.state.richMarkdown.settings.imageHover)
update_hover_widgets(cm);
}
function isLineInCodeBlock(editor, syntaxTree, lineNumber) {
const doc = editor.state.doc
const line = doc.line(lineNumber)
const tree = syntaxTree(editor.state)
let node = tree.resolveInner(line.from)
// Walk up the tree to find if we're inside a code block
while (node) {
if (node.name === "FencedCode" || node.name === "CodeBlock") {
return true
}
node = node.parent
}
return false
}
async function getImageData(cm: any, coord: any) {
let { line, ch } = coord;
const lineText = cm.getLine(line);
const match = ClickHandlers.getMatchAt(lineText, image_inline_regex, ch);
let img = null;
if (match) {
img = await createImage(match[2], match[1], cm.state.richMarkdown.path_from_id, match[4], match[5]);
}
else {
const imgMatch = ClickHandlers.getMatchAt(lineText, Overlay.html_image_regex, ch);
if (imgMatch) {
img = await createImageFromImg(imgMatch[0], cm.state.richMarkdown.path_from_id);
}
}
return img;
}
function open_widget(cm: any) {
return async function(event: MouseEvent) {
if (!event.target) return;
if (!cm.state.richMarkdown) return;
if (!cm.state.richMarkdown.settings.imageHover) return;
// This shortcut is only enabled for the ctrl case because in the default case I would
// prefer to accidentally display 2 images rather than not dislpay anything
if (!cm.state.richMarkdown.settings.imageHoverCtrl &&
(!(event.ctrlKey || event.altKey) || cm.state.richMarkdown.isMouseHovering)) return;
cm.state.richMarkdown.isMouseHovering = true;
const target = event.target as HTMLElement;
if (!target.offsetParent) return;
// This already has the image rendered inline
if (cm.state.richMarkdown.settings.inlineImages && target.parentNode.childNodes.length <= 3)
return;
const img = await getImageData(cm, ClickHandlers.getClickCoord(cm, event));
if (!img) return;
// manual zoom
if (img.style.zoom) {
let zoom = parseFloat(img.style.zoom);
if (img.style.zoom.endsWith('%')){
zoom /= 100
}
if (zoom) {
img.width *= zoom
img.height *= zoom
img.style.zoom = '100%';
}
}
img.style.visibility = 'hidden';
target.offsetParent.appendChild(img);
img.style.position = 'absolute';
img.style.zIndex = '1000';
img.classList.add('rich-markdown-hover-image');
img.onload = function() {
if (!cm.state.richMarkdown) return;
if (!cm.state.richMarkdown.isMouseHovering) {
img.remove();
return;
}
let im = this as HTMLElement;
const par = target.offsetParent as HTMLElement;
const { right, width } = par.getBoundingClientRect();
let x = 0;
if (im.clientWidth < width) {
x = Math.min(event.clientX, right - im.clientWidth);
}
const coords = cm.coordsChar({left: x, top: event.clientY}, 'page');
im.style.visibility = 'visible';
cm.addWidget(coords, img, false);
}
}
}
function clearHoverImages(cm: any) {
const widgets = cm.getWrapperElement().getElementsByClassName('rich-markdown-hover-image');
// Removed widgets are simultaneously removed from this array
// we need to iterate backwards to prevent the array from changing on us
for (let i = widgets.length -1; i >= 0; i--) {
widgets[i].remove();
}
}
function close_widget(cm: any) {
return function(event: MouseEvent) {
if (cm.state.richMarkdown)
cm.state.richMarkdown.isMouseHovering = false;
clearHoverImages(cm);
}
}
function update_hover_widgets(cm: any) {
if (!cm.state.richMarkdown) return;
// If the image source is removed, this update funciton won't catch it
// and the image will be stuck around forever joplin-rich-markdown/issues/69
// this prevents this from happening (by pre-emptively clearing the image)
// but causes a flicker while editing and hovering.
clearHoverImages(cm);
const images = cm.getWrapperElement().getElementsByClassName("cm-rm-image");
for (let image of images) {
image.onmouseenter = open_widget(cm);
image.onmouseleave = close_widget(cm);
if (!cm.state.richMarkdown.settings.imageHoverCtrl) {
image.onmousemove = open_widget(cm);
}
}
}
async function check_lines(cm: any, from: number, to: number, context: any) {
if (!cm.state.richMarkdown) return;
const path_from_id = cm.state.richMarkdown.path_from_id;
let needsRefresh = false;
for (let i = from; i <= to; i++) {
const line = cm.lineInfo(i);
if (line.widgets) {
for (const wid of line.widgets) {
if (wid.className === 'rich-markdown-resource')
wid.clear();
delete allWidgets[wid.node.id];
}
}
if (!line) { continue; }
if (cm.cm6) {
if (!cm.state.richMarkdown.language) {
cm.state.richMarkdown.language = require_codemirror_language();
}
const syntaxTree = cm.state.richMarkdown.language.syntaxTree;
// cm6 uses 1 based indexing for line numbers, but cm5 uses 0 based
// the line object we have here is emulated cm5, so it uses 0 based
// but the checking function is cm6, so we need to adjust
if (isLineInCodeBlock(cm.editor, syntaxTree, line.line + 1)) {
continue;
}
} else {
const state = cm.getStateAfter(i, true);
// Don't render inline images inside of code blocks (not for cm5/legacy editor only)
if (state?.outer && (state?.outer?.code || (state?.outer?.thisLine?.fencedCodeEnd))) {
continue;
}
}
// Special Case
// If the line only contains a link wrapped around an image, we should match against that
const line_link_match = line.text.match(image_line_link_regex);
let lineText = line.text;
let lineLink = '';
if (line_link_match) {
lineText = line_link_match[1];
lineLink = line_link_match[2];
}
const match = lineText.match(image_line_regex);
let img = null;
if (match) {
img = await createImage(match[2], match[1], path_from_id, match[4], match[5], context, lineLink);
}
else {
const imgMatch = line.text.match(html_image_line_regex);
if (imgMatch) {
img = await createImageFromImg(imgMatch[0], path_from_id);
}
}
if (img) {
const wid = cm.addLineWidget(i, img, { className: 'rich-markdown-resource' });
allWidgets[img.id] = wid;
needsRefresh = true;
}
}
if (needsRefresh) {
cm.refresh();
}
}
async function createImageFromImg(imgTag: string, path_from_id: any) {
const par = new DOMParser().parseFromString(imgTag, "text/html");
const img = par.body.firstChild as HTMLImageElement;
img.style.height = img.style.height || 'auto';
img.style.maxWidth = img.style.maxWidth || '100%';
// Tags taken from
// https://github.com/laurent22/joplin/blob/80b16dd17e227e3f538aa221d7b6cc2d81688e72/packages/renderer/htmlUtils.ts
const disallowedTags = ['script', 'noscript', 'iframe', 'frameset', 'frame', 'object', 'base', 'embed', 'link', 'meta'];
for (let i = 0; i < img.attributes.length; i++) {
const name = img.attributes[i].name;
if (disallowedTags.includes(name) || name.startsWith('on')) {
img.attributes[i].value = '';
}
}
// Joplin resource paths get added on to the end of the local path for some reason
if (img.src.length >= 34) {
const id = img.src.substring(img.src.length - 34);
if (id.startsWith(':/')) {
img.src = await path_from_id(id.substring(2));
img.id = id.substring(2);
}
}
return img;
}
async function createImage(path: string, alt: string, path_from_id: any, width?: string, unit?: string, context?: any, link?: string) {
let id = path.substring(2)
if (path.startsWith(':/') && path.length == 34) {
path = await path_from_id(id);
}
if (path.startsWith('<') && path.endsWith('>')) {
// <> quotes are not allowed in URLs as per RFC 1738
// https://www.ietf.org/rfc/rfc1738.txt
// Page 2 includes a list of unsafe characters
path = path.substring(1, path.length - 1);
}
const img = document.createElement('img');
img.src = path;
img.alt = alt;
img.style.maxWidth = '100%';
img.style.height = 'auto';
if (link && context) {
img.onclick = () => {
context.postMessage({ name: 'followLink', url: link });
};
}
if (width) {
img.style.width = width + (unit ? '' : 'px');
}
// This will either contain the resource id or some gibberish path
img.id = id;
return img;
}
// Reload the specified resource on disk, this will be in response
// to changes made by the user
export function refreshResource(cm: any, id: string) {
const timestamp = new Date().getTime();
let wid = allWidgets[id];
const path = wid.node.src.split("?t=")[0];
const height = wid.node.height;
wid.node.onload = function() {
let im = this as HTMLImageElement;
// If the image is scrolled out of view (no need to refresh), it won't have a clientRect
if (im.getClientRects().length == 0) { return; }
if (im.height != height) {
cm.refresh();
}
};
wid.node.src = `${path}?t=${timestamp}`;
}
// Used on cleanup
export function clearAllWidgets(cm: any) {
clearHoverImages(cm);
for (let id in allWidgets) {
allWidgets[id].clear();
}
allWidgets = {};
// Refresh codemirror to make sure everything is sized correctly
cm.refresh();
}
================================================
FILE: src/indent.ts
================================================
// This module is modified from the CodeMirror indent wrap demo
// https://codemirror.net/demo/indentwrap.html
import { list_token_regex } from './overlay';
// These variables are cached when the plugin is loaded
// This stores the width of a space in the current font
let spaceWidth = 0;
// This stores the width of a monospace character using the current monospace font
let monoSpaceWidth = 0;
// This stores the width of the > character in the current font
let blockCharWidth = 0;
// Must be called when the editor is mounted
export function calculateSpaceWidth(cm: any) {
spaceWidth = charWidth(cm, ' ', '');
monoSpaceWidth = charWidth(cm, ' ', 'cm-rm-monospace');
blockCharWidth = charWidth(cm, '>', '');
}
// Adapted from codemirror/lib/codemirror.js
function charWidth(cm: any, chr: string, cls: string) {
let e = document.createElement('span');
if (cls)
e.classList.add(cls);
e.style.whiteSpace = "pre-wrap";
e.appendChild(document.createTextNode(chr.repeat(10)))
const measure = cm.getWrapperElement().getElementsByClassName('CodeMirror-measure')[0];
if (measure.firstChild)
measure.removeChild(measure.firstChild);
measure.appendChild(e);
const rect = e.getBoundingClientRect()
const width = (rect.right - rect.left) / 10;
return width || cm.defaultCharWidth();
}
// Adapted from
// https://github.com/codemirror/CodeMirror/blob/master/demo/indentwrap.html
export function onRenderLine(cm: any, line: any, element: HTMLElement, CodeMirror: any) {
if (!cm.state.richMarkdown) return;
if (cm.state.richMarkdown.settings.alignIndent) {
const matches = line.text.match(list_token_regex);
if (!matches) return;
let off = CodeMirror.countColumn(line.text, matches[0].length, cm.getOption("tabSize")) * spaceWidth;
// Special case handling for checkboxes with monospace enabled
if (cm.state.richMarkdown.settings.enforceMono && matches[0].indexOf('[') > 0) {
// "- [ ] " is 6 characters
off += monoSpaceWidth * 6 - spaceWidth * 6;
}
else if (cm.state.richMarkdown.settings.enforceMono && matches[0].indexOf('>') >= 0) {
off += blockCharWidth - spaceWidth;
}
element.style.textIndent = "-" + off + "px";
element.style.paddingLeft = off + "px";
}
}
================================================
FILE: src/index.ts
================================================
import joplin from 'api';
import { ContentScriptType, MenuItem, MenuItemLocation, ModelType } from 'api/types';
import { getAllSettings, registerAllSettings } from './settings';
// TODO: Waiting for https://github.com/laurent22/joplin/pull/4509
// import prettier = require('prettier/standalone');
// import markdown = require('prettier/parser-markdown');
import { TextItem, TextItemType } from './clickHandlers';
import { isSupportedImageMimeType, isSupportedOcrMimeType } from './images';
import { imageToDataURL } from './imageData';
const fs = joplin.require('fs-extra');
const { parseResourceUrl } = require('@joplin/lib/urlUtils');
const contentScriptId = 'richMarkdownEditor';
joplin.plugins.register({
onStart: async function() {
// There is a bug (race condition?) where the perform action command
// doesn't always work when first opening the app. Opening the keyboard
// shortcuts will properly bind it and make it work.
// Placing the command before registering settings also seems to fix it
await joplin.commands.register({
name: 'editor.richMarkdown.clickAtCursor',
label: 'Perform action',
iconName: 'fas fa-link',
execute: async () => {
await joplin.commands.execute('editor.execCommand', {
name: 'clickUnderCursor',
});
},
});
await joplin.views.menuItems.create('richMarkdownClickAtCursor', 'editor.richMarkdown.clickAtCursor', MenuItemLocation.Note, { accelerator: 'Ctrl+Enter' });
// TODO: See about getting this same behaviour into the openItem function
await joplin.commands.register({
name: 'app.richMarkdown.openItem',
execute: async (url: string) => {
// From RFC 1738 Page 1 a url is :
// the below regex implements matching for the scheme (with support for uppercase)
// urls without a scheme will be assumed http
if (!url.startsWith(':/') && !url.match(/^(?:[a-zA-Z0-9\+\.\-])+:/)) {
url = 'http://' + url;
}
await joplin.commands.execute('openItem', url);
},
});
await joplin.commands.register({
name: 'editor.richMarkdown.toggleCheckbox',
execute: async (coord: any) => {
await joplin.commands.execute('editor.execCommand', {
name: 'toggleCheckbox',
args: [coord],
});
},
});
await joplin.commands.register({
name: 'editor.richMarkdown.checkCheckbox',
execute: async (coord: any) => {
await joplin.commands.execute('editor.execCommand', {
name: 'checkCheckbox',
args: [coord],
});
},
});
await joplin.commands.register({
name: 'editor.richMarkdown.uncheckCheckbox',
execute: async (coord: any) => {
await joplin.commands.execute('editor.execCommand', {
name: 'uncheckCheckbox',
args: [coord],
});
},
});
await joplin.commands.register({
name: 'editor.richMarkdown.copyImage',
execute: async (itemId: string) => {
const resource = await joplin.data.get(['resources', itemId], { fields: ['mime'] });
const resourcePath = await joplin.data.resourcePath(itemId);
const dataUrl = await imageToDataURL(resourcePath, resource.mime);
await joplin.clipboard.writeImage(dataUrl);
},
});
await joplin.commands.register({
name: 'editor.richMarkdown.viewOcrText',
execute: async (itemId: string) => {
const resource = await joplin.data.get(['resources', itemId], { fields: ['id', 'mime', 'ocr_text', 'ocr_status'] });
if (resource.ocr_status === 2) { // ResourceOcrStatus.Done
const tempFilePath = `${await joplin.plugins.dataDir()}/${resource.id}_ocr.txt`;
await fs.writeFile(tempFilePath, resource.ocr_text, 'utf8');
const fileUrl = `file://${tempFilePath.replace(/\\/g, '/')}`;
await joplin.commands.execute('openItem', fileUrl);
} else {
console.info(`OCR of resource ${itemId} is not ready yet ${resource.ocr_status}`);
}
},
});
await joplin.commands.register({
name: 'editor.richMarkdown.copyPathToClipboard',
execute: async (path: string) => {
await joplin.clipboard.writeText(path);
},
});
// Helper to build menu items for a resource (image or other attachment)
const buildResourceMenuItems = async (resourceId: string, openUrl: string): Promise => {
const items: MenuItem[] = [];
const resource = await joplin.data.get(['resources', resourceId], { fields: ['mime'] });
items.push({
label: 'Open link',
commandName: 'app.richMarkdown.openItem',
commandArgs: [openUrl],
});
items.push({
label: 'Reveal file in folder',
commandName: 'revealResourceFile',
commandArgs: [resourceId],
});
if (isSupportedOcrMimeType(resource.mime)) {
items.push({
label: 'View OCR text',
commandName: 'editor.richMarkdown.viewOcrText',
commandArgs: [resourceId],
});
}
if (isSupportedImageMimeType(resource.mime)) {
items.push({
label: 'Copy image',
commandName: 'editor.richMarkdown.copyImage',
commandArgs: [resourceId],
});
}
const resourcePath = await joplin.data.resourcePath(resourceId);
items.push({
label: 'Copy path to clipboard',
commandName: 'editor.richMarkdown.copyPathToClipboard',
commandArgs: [resourcePath],
});
return items;
};
// Helper to build menu items for a non-resource link
const buildLinkMenuItems = (url: string): MenuItem[] => {
return [
{
label: 'Open link',
commandName: 'app.richMarkdown.openItem',
commandArgs: [url],
},
{
label: 'Copy link to clipboard',
commandName: 'editor.richMarkdown.copyPathToClipboard',
commandArgs: [url],
},
];
};
await joplin.workspace.filterEditorContextMenu(async (object: any) => {
// Use context passed by Joplin if available (preferred method).
// This correctly identifies what was right-clicked even when the cursor
// is elsewhere (e.g., after switching from markdown editor to viewer).
const context = object.context || {};
const contextResourceId = context.resourceId;
const contextItemType = context.itemType;
// Fall back to cursor-based detection for backward compatibility
// and for items not covered by context (e.g., checkboxes)
const textItems: TextItem[] = await joplin.commands.execute('editor.execCommand', {
name: 'getItemsUnderCursor',
});
const selection = await joplin.commands.execute('selectedText');
const newItems: MenuItem[] = [];
// If context indicates an image/resource was right-clicked, use that
if (contextResourceId && (contextItemType === 'image' || contextItemType === 'resource')) {
try {
const resourceItems = await buildResourceMenuItems(contextResourceId, `:/${contextResourceId}`);
newItems.push(...resourceItems);
} catch (error) {
console.warn('Rich Markdown: Failed to get resource info from context', error);
}
} else if (textItems.length) {
// Fall back to cursor-based detection
for (const textItem of textItems) {
if (textItem.type === TextItemType.Link || textItem.type === TextItemType.Image) {
const info = parseResourceUrl(textItem.url);
const itemId = info ? info.itemId : null;
const itemType = itemId ? await joplin.data.itemType(itemId) : null;
if (itemType === ModelType.Resource) {
const resourceItems = await buildResourceMenuItems(itemId, textItem.url);
newItems.push(...resourceItems);
} else {
const linkItems = buildLinkMenuItems(textItem.url);
newItems.push(...linkItems);
}
} else if (textItem.type === TextItemType.Checkbox) {
const newlineRegex = /[\r\n]/;
if (newlineRegex.test(selection)) {
newItems.push({
label: 'Toggle all',
commandName: 'editor.richMarkdown.toggleCheckbox',
commandArgs: [textItem.coord],
});
newItems.push({
label: 'Uncheck all',
commandName: 'editor.richMarkdown.uncheckCheckbox',
commandArgs: [textItem.coord],
});
newItems.push({
label: 'Check all',
commandName: 'editor.richMarkdown.checkCheckbox',
commandArgs: [textItem.coord],
});
} else {
newItems.push({
label: 'Toggle checkbox',
commandName: 'editor.richMarkdown.toggleCheckbox',
commandArgs: [textItem.coord],
});
}
}
}
}
if (newItems.length) {
newItems.splice(0, 0, {
type: 'separator',
});
object.items = object.items.concat(newItems);
}
return object;
});
await registerAllSettings();
await joplin.contentScripts.register(
ContentScriptType.CodeMirrorPlugin,
contentScriptId,
'./richMarkdown.js'
);
await joplin.contentScripts.onMessage(contentScriptId, async (message: any) => {
if (message.name === 'getResourcePath') {
return await joplin.data.resourcePath(message.id);
}
else if (message.name === 'getSettings') {
return await getAllSettings();
}
else if (message.name === 'followLink') {
await joplin.commands.execute('app.richMarkdown.openItem', message.url);
}
return "Error: " + message + " is not a valid message";
});
await (joplin.workspace as any).onResourceChange(async (event: any) => {
await joplin.commands.execute('editor.execCommand', {
name: 'refreshResource',
args: [event.id],
});
});
// TODO: Waiting for https://github.com/laurent22/joplin/pull/4509
// await joplin.commands.register({
// name: 'editor.richMarkdown.prettifySelection',
// label: 'Prettify Selection',
// iconName: 'fas fa-rocket',
// execute: async () => {
// const text = await joplin.commands.execute('selectedText');
// const formatted = prettier.format(text, { parser: 'markdown', plugins: [markdown] });
// await joplin.commands.execute('replaceSelection', formatted);
// },
// });
// await joplin.views.menuItems.create('prettifySelectionContext', 'editor.richMarkdown.prettifySelection', MenuItemLocation.EditorContextMenu);
// await joplin.views.menuItems.create('prettifySelectionEdit', 'editor.richMarkdown.prettifySelection', MenuItemLocation.Edit);
// await joplin.views.toolbarButtons.create('prettifySelectionToolbar', 'editor.richMarkdown.prettifySelection', ToolbarButtonLocation.EditorToolbar);
},
});
================================================
FILE: src/manifest.json
================================================
{
"manifest_version": 1,
"id": "plugin.calebjohn.rich-markdown",
"app_min_version": "3.5.9",
"version": "0.17.1",
"name": "Rich Markdown",
"description": "Helping you ditch the markdown viewer for good.",
"author": "Caleb John",
"homepage_url": "https://github.com/CalebJohn/joplin-rich-markdown#readme",
"repository_url": "https://github.com/CalebJohn/joplin-rich-markdown",
"keywords": [
"editor",
"visual"
],
"categories": [
"appearance",
"editor"
],
"screenshots": [
{
"src": "examples/welcome.png",
"label": "A demonstration of what a note can look like using this plugin."
}
],
"icons": {
"16": "icons/16.png",
"32": "icons/32.png",
"48": "icons/48.png",
"128": "icons/128.png"
}
}
================================================
FILE: src/overlay.test.ts
================================================
import * as Overlay from './overlay';
describe('link regex', () => {
test('valid urls', () => {
expect('[many](https://calebjohn.ca)').toMatch(Overlay.link_regex);
expect('').toMatch(Overlay.link_regex);
expect('https://joplinapp.org').toMatch(Overlay.link_regex);
expect('https://joplinapp.org/www(x=y)').toMatch(Overlay.link_regex);
expect('[even this](https://joplinapp.org/www(x=y))').toMatch(Overlay.link_regex);
expect('[even this](https://joplinapp.org/www(x=y)skmfnsm)').toMatch(Overlay.link_regex);
expect('[](test)').toMatch(Overlay.link_regex);
expect('[ev]()').toMatch(Overlay.link_regex);
expect('[](www.google.ca "soe")').toMatch(Overlay.link_regex);
});
test('match groups', () => {
let str = '[many](https://calebjohn.ca)';
Overlay.link_regex.lastIndex = 0;
let match = Overlay.link_regex.exec(str);
expect(match[0]).toBe(str);
expect(match[1]).toBe('https://calebjohn.ca');
expect(match[2]).toBeUndefined();
expect(match[3]).toBeUndefined();
str = '';
Overlay.link_regex.lastIndex = 0;
match = Overlay.link_regex.exec(str);
expect(match[0]).toBe(str);
expect(match[1]).toBeUndefined();
expect(match[2]).toBe('joplinapp.org');
expect(match[3]).toBeUndefined();
str = 'https://joplinapp.org';
Overlay.link_regex.lastIndex = 0;
match = Overlay.link_regex.exec(str);
expect(match[0]).toBe(str);
expect(match[1]).toBeUndefined();
expect(match[2]).toBeUndefined();
expect(match[3]).toBe('https://joplinapp.org');
str = 'https://joplinapp.org/www(x=y)';
Overlay.link_regex.lastIndex = 0;
match = Overlay.link_regex.exec(str);
expect(match[0]).toBe(str);
expect(match[1]).toBeUndefined();
expect(match[2]).toBeUndefined();
expect(match[3]).toBe('https://joplinapp.org/www(x=y)');
str = '[even this](https://joplinapp.org/www(x=y))';
Overlay.link_regex.lastIndex = 0;
match = Overlay.link_regex.exec(str);
expect(match[0]).toBe(str);
expect(match[1]).toBe('https://joplinapp.org/www(x=y)');
expect(match[2]).toBeUndefined();
expect(match[3]).toBeUndefined();
str = '[even this](https://joplinapp.org/www(x=y)skmfnsm)';
Overlay.link_regex.lastIndex = 0;
match = Overlay.link_regex.exec(str);
expect(match[0]).toBe(str);
expect(match[1]).toBe('https://joplinapp.org/www(x=y)skmfnsm');
expect(match[2]).toBeUndefined();
expect(match[3]).toBeUndefined();
// It's too difficult to support nested parens using regexes
// let's hope we never face such a cursed url
str = '[even this](https://joplinapp.org/www(x(=)y)skmfnsm)';
Overlay.link_regex.lastIndex = 0;
match = Overlay.link_regex.exec(str);
expect(match[0]).toBe('[even this](https://joplinapp.org/www(x(=)y)');
expect(match[1]).toBe('https://joplinapp.org/www(x(=)y');
expect(match[2]).toBeUndefined();
expect(match[3]).toBeUndefined();
str = '[](test)';
Overlay.link_regex.lastIndex = 0;
match = Overlay.link_regex.exec(str);
expect(match[0]).toBe(str);
expect(match[1]).toBe('test');
expect(match[2]).toBeUndefined();
expect(match[3]).toBeUndefined();
str = '[](www.google.ca "soe")';
Overlay.link_regex.lastIndex = 0;
match = Overlay.link_regex.exec(str);
expect(match[0]).toBe(str);
expect(match[1]).toBe('www.google.ca "soe"');
expect(match[2]).toBeUndefined();
expect(match[3]).toBeUndefined();
});
});
describe('highlight regex', () => {
test('valid highlight', () => {
expect('==highlight==').toMatch(Overlay.highlight_regex);
expect('==high light==').toMatch(Overlay.highlight_regex);
expect('==highlight=me==').toMatch(Overlay.highlight_regex);
expect('==highlight=me=please==').toMatch(Overlay.highlight_regex);
});
test('invalid highlight', () => {
expect('\\==lowlight==').not.toMatch(Overlay.highlight_regex);
expect('==lowlight\\==').not.toMatch(Overlay.highlight_regex);
expect('== lowlight==').not.toMatch(Overlay.highlight_regex);
expect('==lowlight ==').not.toMatch(Overlay.highlight_regex);
expect('=lowlight=').not.toMatch(Overlay.highlight_regex);
expect('lowlight== lowlight==').not.toMatch(Overlay.highlight_regex);
});
});
describe('html full image regex', () => {
test('valid html matches', () => {
expect('
').toMatch(Overlay.html_full_image_regex);
expect('
').toMatch(Overlay.html_full_image_regex);
expect('
').toMatch(Overlay.html_full_image_regex);
expect('
').toMatch(Overlay.html_full_image_regex);
expect('
').toMatch(Overlay.html_full_image_regex);
expect('
').toMatch(Overlay.html_full_image_regex);
});
test('invalid html matches', () => {
expect('').not.toMatch(Overlay.html_full_image_regex);
expect('![]()
').not.toMatch(Overlay.html_full_image_regex);
expect('![Grapefruit slice atop a pile of other slices]()
').not.toMatch(Overlay.html_full_image_regex);
expect('').not.toMatch(Overlay.html_full_image_regex);
});
});
================================================
FILE: src/overlay.ts
================================================
// Taken from codemirror/addon/edit/continuelist.js
export const checkbox_regex = /^(\s*)((?:[\*\+\-\#]|[\#]+) )(\[[Xx ]\])\s.*$/g;
export const checkboxed_regex = /^(\s*)((?:[\*\+\-\#]|[\#]+) )(\[[Xx]\])\s.*$/g;
export const checkbox_inner_regex = /(?<=\[)[Xx ](?=\])/g;
export const checkbox_inner_checked_regex = /(?<=\[)[Xx](?=\])/g;
// Last part of regex taken from https://stackoverflow.com/a/17773849/12245502
// This regex will match html tags tht somehow include a . in them
// I've decided that this is an acceptable level of functionality
export const link_regex = /(?\s]+\.[^>\s]+)>|((?:[a-zA-Z0-9\+\.\-])+:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|(?:[a-zA-Z0-9\+\.\-])+:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})|joplin:\/\/x-callback-url\/.*/g;
export const link_reference_regex = /(?]+?)\/?>/g;
// Used for clicking on images in editor, note: 2 extra capture groups to align with link regex
export const html_full_image_regex = /]*?src\s*=\s*['"]([^'"]*)['"][^>]*?()())\/?>/g;
export const highlight_regex = /(?]\s|(\d+)([.)]\s))(\s*)/g;
// Taken from codemirror/mode/markdown/markdown.js
export const hr_regex = /^([*\-_])(?:\s*\1){2,}\s*$/;
export const blockquote_regex = /^\s*\>+\s/g;
export const nbsp_regex = / /g;
// TODO: Extend this to get better table highlighting
export const table_regex = /^\|[^\n]+\|/g;
function exec(query: RegExp, stream: any) {
query.lastIndex = stream.pos;
return query.exec(stream.string);
}
export function regexOverlay(name: string, regex: RegExp, requiredSettings: string[]) {
// Hack to allow the backtick regexes in code blocks
const allowedInCodeblock = name.indexOf("tick") > 0;
return {
name: "RichMarkdownOverlay-" + name,
requiredSettings: requiredSettings,
token: function(stream: any) {
const match = exec(regex, stream);
const baseToken = stream.baseToken();
if (baseToken?.type && (
// This baseToken stuff doesn't actually work in Joplin code blocks, but it does
// work to prevent highlighting of the backtick tokens, so I need to add a special
// case to allow them. It also works inside comments which I think is handy
!allowedInCodeblock && (
baseToken.type.includes("jn-inline-code") ||
baseToken.type.includes("comment")
) ||
baseToken.type.includes("katex"))) {
stream.pos += baseToken.size;
}
else if (match && match.index === stream.pos) {
// advance
stream.pos += match[0].length || 1;
return name;
}
else if (match) {
// jump to the next match
stream.pos = match.index;
}
else {
stream.skipToEnd();
}
return null;
},
};
}
export const overlays = [
regexOverlay('rm-checkbox', checkbox_regex, []),
regexOverlay('rm-checkboxed', checkboxed_regex, ['extraCSS']),
regexOverlay('rm-checkbox-check', checkbox_inner_regex, ['extraCSS']),
regexOverlay('rm-checkbox-checked', checkbox_inner_checked_regex, ['extraCSS']),
regexOverlay('rm-link', link_regex, []),
regexOverlay('rm-link-label', link_label_regex, []),
regexOverlay('rm-image', image_regex, []),
regexOverlay('rm-image', html_image_regex, []),
regexOverlay('rm-list-token', list_token_regex, []),
regexOverlay('rm-ins', insert_regex, ['insertHighlight']),
regexOverlay('rm-sub', sub_regex, ['subHighlight']),
regexOverlay('rm-sup', sup_regex, ['supHighlight']),
regexOverlay('rm-header-token', header_regex, ['extraCSS']),
regexOverlay('line-cm-rm-blockquote', blockquote_regex, ['extraCSS']),
regexOverlay('rm-em-token', emph_star_regex, ['extraCSS']),
regexOverlay('rm-em-token', emph_underline_regex, ['extraCSS']),
regexOverlay('rm-strong-token', strong_star_regex, ['extraCSS']),
regexOverlay('rm-strong-token', strong_underline_regex, ['extraCSS']),
regexOverlay('rm-highlight', highlight_regex, ['markHighlight']),
regexOverlay('rm-highlight-token', highlight_token_regex, ['extraCSS', 'markHighlight']),
regexOverlay('rm-ins-token', insert_token_regex, ['extraCSS', 'insertHighlight']),
regexOverlay('rm-sub-token', sub_token_regex, ['extraCSS', 'subHighlight']),
regexOverlay('rm-sup-token', sup_token_regex, ['extraCSS', 'supHighlight']),
regexOverlay('rm-strike-token', strike_token_regex, ['extraCSS']),
regexOverlay('rm-backtick-token', backtick_token_regex, ['extraCSS']),
regexOverlay('rm-triptick-token', backtick_block_token_regex, ['extraCSS']),
regexOverlay('rm-hr line-cm-rm-hr', hr_regex, ['extraCSS']),
regexOverlay('rm-admonition-token line-cm-rm-admonition line-background-cm-rm-admonition', admonition_token_regex, ['extraCSS']),
regexOverlay('rm-admonition', admonition_line_regex, ['extraCSS']),
regexOverlay('rm-nbsp', nbsp_regex, ['extraCSS']),
];
function validate(settings: any, values: string[]): boolean {
for (let value of values) {
if (!settings[value] && !(value === "extraCSS" && (settings.theme !== "none" || settings.extraFancy)))
return false;
}
return true;
}
export function add(cm: any) {
if (!cm.state.richMarkdown) return;
for (let overlay of overlays)
if (validate(cm.state.richMarkdown.settings, overlay.requiredSettings))
cm.addOverlay(overlay);
}
export function remove(cm: any) {
for (let overlay of overlays)
cm.removeOverlay(overlay);
}
================================================
FILE: src/richMarkdown.ts
================================================
import * as ImageHandlers from './images';
import * as ClickHandlers from './clickHandlers';
import * as Overlay from './overlay';
import * as IndentHandlers from './indent';
import * as Stylesheets from './stylesheets';
import { RichMarkdownSettings } from './settings';
import { listIndent } from './cm6ListIndent';
module.exports = {
default: function(context) {
return {
plugin: function(CodeMirror) {
async function path_from_id(id: string) {
return await context.postMessage({name:'getResourcePath', id: id});
}
async function get_settings() {
return await context.postMessage({name: 'getSettings'});
}
function is_click_allowed(cm:any, event: MouseEvent) {
const settings = cm.state.richMarkdown.settings;
if (!settings.clickCtrl) return true;
let allowed = false;
if (settings.clickAlt) {
allowed = allowed || event.altKey;
}
if (navigator.platform.toUpperCase().indexOf('MAC') >= 0) {
allowed = allowed || event.metaKey;
}
else {
allowed = allowed || event.ctrlKey;
}
return allowed;
}
CodeMirror.defineExtension('initializeRichMarkdown', function(settings: RichMarkdownSettings) {
this.state.richMarkdown = {
settings,
path_from_id,
};
this.on('change', on_change);
this.on('update', on_update);
this.on('mousedown', on_mousedown);
this.on('renderLine', on_renderLine);
try {
JSON.parse(settings.regexOverlays).forEach((overlay: any) => {
Overlay.overlays.push(
Overlay.regexOverlay(overlay.name, new RegExp(overlay.regex, 'g'), ['extraCSS'])
);
});
} catch (e) {
console.error('Error parsing regexOverlays', e);
}
Overlay.add(this);
IndentHandlers.calculateSpaceWidth(this);
this.updateRichMarkdownSettings(settings);
if (this.cm6 && this.state.richMarkdown.settings.alignIndent) {
this.addExtension(listIndent());
}
});
CodeMirror.defineExtension('updateRichMarkdownSettings', function(newSettings: RichMarkdownSettings) {
if (!this.state.richMarkdown) return;
this.state.richMarkdown.settings = newSettings;
ImageHandlers.clearAllWidgets(this);
ImageHandlers.onSourceChanged(this, this.firstLine(), this.lastLine(), context);
ImageHandlers.afterSourceChanges(this);
if (newSettings.activeLine) {
this.setOption('styleActiveLine', { nonEmpty: true });
} else {
this.setOption('styleActiveLine', false);
}
this.getWrapperElement().onmousemove = on_mousemove(this, newSettings);
this.getWrapperElement().onmouseup = on_mouseup(this, newSettings);
Stylesheets.refreshStylesheets(this);
});
CodeMirror.defineExtension('clickUnderCursor', function() {
const coord = this.getCursor('head');
const mes = ClickHandlers.clickAt(this, coord);
if (mes)
context.postMessage(mes);
});
CodeMirror.defineExtension('getItemsUnderCursor', function(responsePromiseId:string) {
const coord = this.getCursor('head');
return ClickHandlers.getItemsAt(this, coord);
});
CodeMirror.defineExtension('toggleCheckbox', function(coord:any) {
ClickHandlers.toggleCheckbox(this, coord, '');
});
CodeMirror.defineExtension('checkCheckbox', function(coord:any) {
ClickHandlers.toggleCheckbox(this, coord, '[x]');
});
CodeMirror.defineExtension('uncheckCheckbox', function(coord:any) {
ClickHandlers.toggleCheckbox(this, coord, '[ ]');
});
CodeMirror.defineExtension('refreshResource', function(resourceId:string) {
ImageHandlers.refreshResource(this, resourceId);
});
function on_renderLine(cm: any, line: any, element: HTMLElement) {
IndentHandlers.onRenderLine(cm, line, element, CodeMirror);
}
function get_change_lines(change: any) {
// change.from and change.to reflect the change location *before* the edit took place
// when a larger scale edit happens they don't necessarily reflect the true scope of changes
const from = change.from.line;
let to = change.to.line;
to -= change.removed.length;
to += change.text.length;
return { from, to };
}
function on_change(cm: any, change: any) {
const { from, to } = get_change_lines(change);
ImageHandlers.onSourceChanged(cm, from, to, context);
}
function on_update(cm: any) {
ImageHandlers.afterSourceChanges(cm);
}
async function on_mousedown(cm: any, event: MouseEvent) {
if (!cm.state.richMarkdown) return;
const clickAllowed = is_click_allowed(cm, event);
if (clickAllowed &&
(ClickHandlers.isLink(event) ||
ClickHandlers.isCheckbox(event))) {
const coord = ClickHandlers.getClickCoord(cm, event);
const mes = ClickHandlers.clickAt(cm, coord);
if (mes)
context.postMessage(mes);
event.preventDefault();
}
}
function update_cursor(cm:any, settings: RichMarkdownSettings, event: MouseEvent) {
if (!event.target) return;
let cursor = '';
if ((settings.links && ClickHandlers.isLink(event)) ||
(settings.checkbox && ClickHandlers.isCheckbox(event))) {
cursor = is_click_allowed(cm, event) ? 'pointer' : cursor;
}
const target = event.target as HTMLElement;
target.style.cursor = cursor;
}
function on_mousemove(cm:any, settings: RichMarkdownSettings) {
return function(event: MouseEvent) {
update_cursor(cm, settings, event);
}
}
function on_mouseup(cm:any, settings: RichMarkdownSettings) {
return function(event: MouseEvent) {
update_cursor(cm, settings, event);
}
}
CodeMirror.defineOption('enable-rich-mode', false, async function(cm, val, old) {
// Cleanup
if (old && old != CodeMirror.Init) {
cm.off('change', on_change);
cm.off('update', on_update);
cm.off('mousedown', on_mousedown);
cm.off('renderLine', on_renderLine);
Overlay.remove(cm);
cm.state.richMarkdown = null;
ImageHandlers.clearAllWidgets(cm);
}
// setup
if (val) {
// There is a race condition in the Joplin initialization code
// Sometimes the settings aren't ready yet and will return `undefined`
// This code will perform an exponential backoff and poll settings
// until something is returned
async function backoff(timeout: number) {
const settings = await get_settings();
if (!settings) {
setTimeout(backoff, timeout * 2, timeout * 2);
}
else {
cm.initializeRichMarkdown(settings);
}
};
// Set the first timeout to 50 because settings are usually ready immediately
// Set the first backoff to (100*2) to give a little extra time
setTimeout(backoff, 50, 100);
}
});
},
codeMirrorResources: ['addon/selection/active-line', 'addon/selection/mark-selection'],
codeMirrorOptions: { 'enable-rich-mode': true,
'styleSelectedText': true },
assets: function() {
return [
{ mime: 'text/css',
inline: true,
text: `.cm-rm-monospace {
font-family: monospace !important;
}
.cm-rm-ins {
text-decoration: underline;
}
.cm-jn-code-block .cm-rm-ins {
text-decoration: revert;
}
.cm-rm-sub {
vertical-align: sub;
font-size: smaller;
}
.cm-rm-sup {
vertical-align: super;
font-size: smaller;
}
.cm-jn-code-block .cm-rm-sub, .cm-jn-code-block .cm-rm-sup {
vertical-align: revert;
font-size: revert;
}
div.CodeMirror span.cm-overlay.cm-rm-highlight {
background-color: var(--joplin-search-marker-background-color);
color: var(--joplin-search-marker-color);
}
div.CodeMirror span.cm-rm-highlight {
background-color: var(--joplin-search-marker-background-color);
color: var(--joplin-search-marker-color);
}
.cm-jn-code-block .cm-rm-highlight, .cm-jn-code-block .cm-rm-highlight-token {
color: revert;
background-color: revert;
}
div.CodeMirror span.cm-comment.cm-jn-inline-code.cm-overlay.cm-rm-backtick-token:not(.cm-search-marker):not(.cm-fat-cursor-mark):not(.cm-search-marker-selected):not(.CodeMirror-selectedtext) {
background-color: transparent;
border: none;
}
div.CodeMirror span.cm-comment.cm-jn-inline-code.cm-rm-backtick-token:not(.cm-search-marker):not(.cm-fat-cursor-mark):not(.cm-search-marker-selected):not(.CodeMirror-selectedtext) {
background-color: transparent;
border: none;
}
.CodeMirror-selectedtext.cm-rm-highlight {
background-color: #e5d3ce;
}
/* Needed for the renderLine indent hack to work */
.CodeMirror pre > * { text-indent: 0px; }
.cm-rm-list-token .cm-ext-checkbox-toggle .content { text-indent: 0px; }
`
}
];
},
}
},
}
================================================
FILE: src/settings.ts
================================================
import joplin from 'api';
import { MenuItemLocation, SettingItemType } from 'api/types';
export interface RichMarkdownSettings {
inlineImages: boolean;
imageHover: boolean;
imageHoverCtrl: boolean;
markHighlight: boolean;
insertHighlight: boolean;
subHighlight: boolean;
supHighlight: boolean;
extraCSS: boolean;
activeLine: boolean;
alignIndent: boolean;
checkbox: boolean;
links: boolean;
clickCtrl: boolean;
clickAlt: boolean;
focusMode: boolean;
theme: string;
extraFancy: string;
cssPath: string;
regexOverlays: string;
}
export async function getAllSettings(): Promise {
return {
inlineImages: await joplin.settings.value('inlineImages'),
imageHover: await joplin.settings.value('imageHover'),
imageHoverCtrl: await joplin.settings.value('imageHoverCtrl'),
markHighlight: await joplin.settings.globalValue('markdown.plugin.mark'),
insertHighlight: await joplin.settings.globalValue('markdown.plugin.insert'),
subHighlight: await joplin.settings.globalValue('markdown.plugin.sub'),
supHighlight: await joplin.settings.globalValue('markdown.plugin.sup'),
extraCSS: await joplin.settings.value('extraCSS'),
activeLine: await joplin.settings.value('activeLine'),
alignIndent: await joplin.settings.value('alignIndent'),
checkbox: await joplin.settings.value('checkbox'),
links: await joplin.settings.value('links'),
clickCtrl: await joplin.settings.value('clickCtrl'),
clickAlt: await joplin.settings.value('clickAlt'),
focusMode: await joplin.settings.value('focusMode'),
theme: await joplin.settings.value('theme'),
extraFancy: await joplin.settings.value('extraFancy'),
cssPath: await joplin.plugins.installationDir(),
regexOverlays: await joplin.settings.value('regexOverlays'),
}
}
export async function registerAllSettings() {
await joplin.settings.registerSection('settings.calebjohn.richmarkdown', {
label: 'Rich Markdown',
iconName: 'fas fa-rocket'
});
await joplin.settings.registerSettings({
'inlineImages': {
value: false,
type: SettingItemType.Bool,
section: 'settings.calebjohn.richmarkdown',
public: true,
label: 'Render images below their markdown source (only for images on their own line)'
},
'imageHover': {
value: true,
type: SettingItemType.Bool,
section: 'settings.calebjohn.richmarkdown',
public: true,
label: 'Show an image popup when hovering over the image source with Ctrl (or Opt) pressed'
},
'imageHoverCtrl': {
value: false,
type: SettingItemType.Bool,
section: 'settings.calebjohn.richmarkdown',
public: true,
label: 'Enable image popup even when Ctrl (or Opt) is not pressed'
},
'alignIndent': {
value: true,
type: SettingItemType.Bool,
section: 'settings.calebjohn.richmarkdown',
public: true,
label: 'Align wrapped list items to the indent level',
},
'extraCSS': {
value: false,
type: SettingItemType.Bool,
section: 'settings.calebjohn.richmarkdown',
public: true,
label: 'Add additional CSS classes for enhanced customization',
description: 'See https://github.com/CalebJohn/joplin-rich-markdown#extra-css for options',
},
'activeLine': {
value: false,
type: SettingItemType.Bool,
section: 'settings.calebjohn.richmarkdown',
public: true,
label: 'Highlight the background of the current line',
},
'checkbox': {
value: true,
type: SettingItemType.Bool,
section: 'settings.calebjohn.richmarkdown',
public: true,
label: 'Toggle checkboxes with Ctrl (or Cmd)+Click'
},
'links': {
value: true,
type: SettingItemType.Bool,
section: 'settings.calebjohn.richmarkdown',
public: true,
label: 'Follow note links with Ctrl (or Cmd)+Click'
},
'clickCtrl': {
value: true,
type: SettingItemType.Bool,
advanced: true,
section: 'settings.calebjohn.richmarkdown',
public: true,
label: 'Require Ctrl (or Cmd) when clicking on elements (links and checkboxes)',
description: 'It\'s recommended not to change this',
},
'clickAlt': {
value: false,
type: SettingItemType.Bool,
advanced: true,
section: 'settings.calebjohn.richmarkdown',
public: true,
label: 'Allow Alt (or Opt) in addition to Ctrl/Cmd when clicking on elements (links and checkboxes)',
description: 'It\'s recommended not to change this',
},
'focusMode': {
value: false,
type: SettingItemType.Bool,
section: 'settings.calebjohn.richmarkdown',
public: true,
label: 'Focus Mode',
description: 'Fade everything that isn\'t the current paragraph.',
},
'theme': {
label: 'Theme',
value: 'none',
type: SettingItemType.String,
section: 'settings.calebjohn.richmarkdown',
isEnum: true,
public: true,
options: {
'none': 'none',
'stylish': 'Stylish',
},
description: 'Warning: Changing theme can change the settings above.',
},
'extraFancy': {
value: false,
type: SettingItemType.Bool,
section: 'settings.calebjohn.richmarkdown',
public: true,
label: 'Hide Markdown Elements',
description: 'Fades the markdown characters on other lines',
},
'regexOverlays': {
value: '[]',
type: SettingItemType.String,
section: 'settings.calebjohn.richmarkdown',
public: true,
advanced: true,
label: 'Custom classes JSON',
description: 'Add custom classes in the format of [{"name": "className", "regex": string}] to create custom overlays referenced as "cm-className".',
},
});
registerToggle('inlineImages',
'Toggle images in the markdown editor',
'fas fa-image');
registerToggle('focusMode',
'Toggle focus mode in the markdown editor',
'fas fa-eye');
}
async function registerToggle(name: string, label: string, icon: string) {
await joplin.commands.register({
name: `richMarkdown.${name}`,
label: label,
iconName: icon,
execute: async () => {
const enabled = await joplin.settings.value(name);
joplin.settings.setValue(name, !enabled);
const settings = await getAllSettings();
await joplin.commands.execute('editor.execCommand', {
name: 'updateRichMarkdownSettings',
args: [settings]
});
},
});
await joplin.views.menuItems.create(`richMarkdown${name}`, `richMarkdown.${name}`, MenuItemLocation.View);
}
================================================
FILE: src/style/extra_css_fixes.css
================================================
div.cm-editor .cm-inlineCode {
background-color: var(--joplin-code-background-color);
border-style: none;
}
================================================
FILE: src/style/extra_fancy.css
================================================
/* Hide everything */
.cm-header.cm-rm-header-token, .cm-em.cm-rm-em-token, .cm-strong.cm-rm-strong-token, div.CodeMirror span.cm-overlay.cm-rm-highlight.cm-rm-highlight-token, div.CodeMirror span.cm-rm-highlight .cm-rm-highlight-token, .cm-strikethrough.cm-rm-strike-token, .cm-rm-ins.cm-rm-ins-token, .cm-rm-sub.cm-rm-sub-token, .cm-rm-sup.cm-rm-sup-token, .cm-quote.cm-rm-list-token, .cm-katex-marker-open, .cm-katex-marker-close, .cm-rm-backtick-token, .cm-rm-triptick-token, .cm-rm-nbsp,
div.cm-editor .tok-meta {
opacity: 0.2 !important;
font-size: 0.9em;
background: transparent;
color: inherit;
transition: opacity 0.3s;
}
/* Restore font-size inside of markdown tables because it messes up alignment */
div.cm-editor .cm-tableDelimiter .tok-meta {
font-size: 1em;
}
/* The url string looks not great when it's faded all the way to 0.2*/
div.CodeMirror .cm-string.cm-url,
div.cm-editor .cm-url {
opacity: 0.5 !important;
font-size: 0.9em;
transition: opacity 0.3s;
}
div.CodeMirror .CodeMirror-activeline .cm-string.cm-url, .CodeMirror-activeline .cm-header.cm-rm-header-token, .CodeMirror-activeline .cm-em.cm-rm-em-token, .CodeMirror-activeline .cm-strong.cm-rm-strong-token, div.CodeMirror .CodeMirror-activeline span.cm-overlay.cm-rm-highlight.cm-rm-highlight-token, div.CodeMirror .CodeMirror-activeline span.cm-rm-highlight .cm-rm-highlight-token, .CodeMirror-activeline .cm-strikethrough.cm-rm-strike-token, .CodeMirror-activeline .cm-rm-ins.cm-rm-ins-token, .CodeMirror-activeline .cm-rm-sub.cm-rm-sub-token, .CodeMirror-activeline .cm-rm-sup.cm-rm-sup-token, .CodeMirror-activeline .cm-quote.cm-rm-list-token, .CodeMirror-activeline .cm-katex-marker-open, .CodeMirror-activeline .cm-katex-marker-close, .CodeMirror-activeline .cm-rm-backtick-token, .CodeMirror-activeline .cm-rm-triptick-token, .CodeMirror-activeline .cm-rm-nbsp,
div.cm-editor .CodeMirror-activeline .tok-meta, div.cm-editor .cm-url {
opacity: 0.7 !important;
background: transparent;
color: inherit;
transition: opacity 0.5s;
}
/* Don't apply the fading in code blocks */
div.CodeMirror .cm-jn-code-block .cm-string.cm-url,
.cm-jn-code-block .cm-header.cm-rm-header-token,
.cm-jn-code-block .cm-em.cm-rm-em-token,
.cm-jn-code-block .cm-strong.cm-rm-strong-token,
.cm-jn-code-block .cm-rm-highlight.cm-rm-highlight-token,
.cm-jn-code-block .cm-strikethrough.cm-rm-strike-token,
.cm-jn-code-block .cm-rm-ins.cm-rm-ins-token,
.cm-jn-code-block .cm-rm-sub.cm-rm-sub-token,
.cm-jn-code-block .cm-rm-sup.cm-rm-sup-token,
.cm-jn-code-block .cm-quote.cm-rm-list-token,
.cm-jn-code-block .cm-katex-marker-open,
.cm-jn-code-block .cm-katex-marker-close,
.cm-jn-code-block .cm-rm-nbsp {
opacity: revert !important;
font-size: revert;
}
/* Revert background colour change on the activeline */
.CodeMirror .CodeMirror-activeline
.CodeMirror-activeline-background:not(.cm-jn-code-block):not(.cm-jn-code-block-background),
.cm-editor .CodeMirror-activeline-background,
.cm-s-solarized.cm-s-light div.CodeMirror-activeline-background,
.cm-s-solarized.cm-s-dark div.CodeMirror-activeline-background {
background: inherit;
}
/* END Hide everything */
================================================
FILE: src/style/focus.css
================================================
div.CodeMirror .CodeMirror-line,
div.cm-editor .cm-line,
div.CodeMirror img {
opacity: 0.4;
color: var(--joplin-color) !important;
transition: opacity 0.2s;
}
div.CodeMirror .CodeMirror-activeline .CodeMirror-line,
div.CodeMirror .CodeMirror-activeline img,
div.CodeMirror .CodeMirror-activeline.cm-line,
div.cm-editor .CodeMirror-activeline + .rich-markdown-resource.cm-line > img,
div.cm-editor .CodeMirror-activeline + .rich-markdown-resource.cm-line {
opacity: 1.0;
transition: opacity 0.4s;
}
/* Revert background colour change on the activeline */
.CodeMirror .CodeMirror-activeline
.CodeMirror-activeline-background:not(.cm-jn-code-block):not(.cm-jn-code-block-background),
.cm-editor .CodeMirror-activeline-background:not(.cm-jn-code-block):not(.cm-jn-code-block-background),
.cm-s-solarized.cm-s-light div.CodeMirror-activeline-background,
.cm-s-solarized.cm-s-dark div.CodeMirror-activeline-background {
background: inherit;
}
================================================
FILE: src/style/stylish.css
================================================
/*
* Adapted from the theme that uxamanda shared on the Joplin forum
* https://discourse.joplinapp.org/t/plugin-rich-markdown/15053/108
* */
/* Horizontal Rule*/
div.CodeMirror span.cm-hr {
border-top: 2px solid var(--joplin-divider-color);
display: block;
line-height: 1px;
width: 100%;
}
/* END Horizontal Rule*/
/* Blockquotes */
pre.cm-rm-blockquote.CodeMirror-line,
pre.cm-rm-blockquote.cm-line {
border-left: 4px solid var(--joplin-code-border-color);
opacity: 0.7;
}
pre.cm-rm-blockquote span.cm-quote + span.cm-quote {
opacity: 1;
}
/* END Blockquotes */
/* Fade tokens*/
div.CodeMirror .cm-string.cm-url,
div.CodeMirror .cm-header.cm-rm-header-token,
div.CodeMirror .cm-overlay.cm-rm-highlight.cm-rm-highlight-token,
div.CodeMirror .cm-rm-highlight .cm-rm-highlight-token,
div.CodeMirror .cm-strikethrough.cm-rm-strike-token,
div.CodeMirror .cm-rm-ins.cm-rm-ins-token,
div.CodeMirror .cm-rm-sub.cm-rm-sub-token,
div.CodeMirror .cm-rm-sup.cm-rm-sup-token,
div.CodeMirror .cm-quote.cm-rm-list-token,
div.CodeMirror .cm-rm-backtick-token,
div.CodeMirror .cm-rm-triptick-token,
div.CodeMirror .cm-em.cm-rm-em-token,
div.CodeMirror .cm-katex-marker-open,
div.CodeMirror .cm-katex-marker-close,
div.CodeMirror .cm-strong.cm-rm-strong-token,
div.CodeMirror .cm-rm-nbsp,
div.cm-editor .tok-meta {
opacity: 0.6;
background: transparent;
color: inherit;
}
/* Don't apply the fading in code blocks */
div.CodeMirror .cm-jn-code-block .cm-string.cm-url,
div.CodeMirror .cm-jn-code-block .cm-header.cm-rm-header-token,
div.CodeMirror .cm-jn-code-block .cm-em.cm-rm-em-token,
div.CodeMirror .cm-jn-code-block .cm-strong.cm-rm-strong-token,
div.CodeMirror .cm-jn-code-block .cm-rm-highlight.cm-rm-highlight-token,
div.CodeMirror .cm-jn-code-block .cm-rm-highlight .cm-rm-highlight-token,
div.CodeMirror .cm-jn-code-block .cm-strikethrough.cm-rm-strike-token,
div.CodeMirror .cm-jn-code-block .cm-rm-ins.cm-rm-ins-token,
div.CodeMirror .cm-jn-code-block .cm-rm-sub.cm-rm-sub-token,
div.CodeMirror .cm-jn-code-block .cm-rm-sup.cm-rm-sup-token,
div.CodeMirror .cm-jn-code-block .cm-quote.cm-rm-list-token,
div.CodeMirror .cm-jn-code-block .cm-katex-marker-open,
div.CodeMirror .cm-jn-code-block .cm-katex-marker-close,
div.CodeMirror .cm-rm-nbsp,
div.cm-editor .cm-jn-code-block .tok-meta {
opacity: revert;
color: inherit;
}
/* END Fade tokens*/
/* Headers */
div.CodeMirror .cm-header.cm-rm-header-token:not(.cm-whitespace-a, .cm-whitespace-b),
div.cm-editor .cm-header > .cm-rm-header-token {
font-family: monospace;
font-size: 0.9em;
/* Add some spacing for breathing room */
margin-right: 0.3ex;
}
div.CodeMirror .cm-rm-header-token.cm-header-1:not(.cm-whitespace-a, .cm-whitespace-b),
div.cm-editor .cm-header.cm-h1 > .cm-rm-header-token {
/* 1ex is the height of a lowercase x, it's an approximation for width */
/* We need 2ex to account for the space character */
margin-left: -2ex;
}
div.CodeMirror .cm-rm-header-token.cm-header-2:not(.cm-whitespace-a, .cm-whitespace-b),
div.cm-editor .cm-header.cm-h2 > .cm-rm-header-token {
margin-left: -3ex;
}
div.CodeMirror .cm-rm-header-token.cm-header-3:not(.cm-whitespace-a, .cm-whitespace-b),
div.cm-editor .cm-header.cm-h3 > .cm-rm-header-token {
margin-left: -4ex;
}
div.CodeMirror .cm-rm-header-token.cm-header-4:not(.cm-whitespace-a, .cm-whitespace-b),
div.cm-editor .cm-header.cm-h4 > .cm-rm-header-token {
margin-left: -5ex;
}
div.CodeMirror .cm-rm-header-token.cm-header-5:not(.cm-whitespace-a, .cm-whitespace-b),
div.cm-editor .cm-header.cm-h5 > .cm-rm-header-token {
margin-left: -6ex;
}
div.CodeMirror .cm-rm-header-token.cm-header-6:not(.cm-whitespace-a, .cm-whitespace-b),
div.cm-editor .cm-header.cm-h6 > .cm-rm-header-token {
margin-left: -7ex;
}
/* END Headers */
/* Checkbox */
/* strikeout and dim the text of a checked checkbox */
.cm-property + span.cm-rm-checkbox + span.cm-rm-checkbox ~ span.cm-rm-checkbox {
text-decoration: line-through;
opacity: 0.7;
}
/* Remove the strikethrough from the right edge of the checkbox */
div.CodeMirror span.cm-property.cm-rm-checkbox {
text-decoration: none;
opacity: 1;
}
/* END Checkbox */
================================================
FILE: src/stylesheets.ts
================================================
// Hack to store created elements so that the can easily be removed (and re-added)
const elements = [
'focus',
'stylish',
'extra_fancy',
'extra_css_fixes',
];
const idPrefix = "content-script-richMarkdown-link-";
function createElement(name: string, path: string) {
const element = document.createElement('link');
element.setAttribute('id', idPrefix + name);
element.setAttribute('rel', 'stylesheet');
element.setAttribute('href', path + "/style/" + name + ".css");
return element;
}
export function refreshStylesheets(cm: any) {
if (!cm.state.richMarkdown) return;
cleanup(cm);
const settings = cm.state.richMarkdown.settings;
if (settings.focusMode) {
cm.setOption('styleActiveLine', { nonEmpty: true });
const element = createElement('focus', settings.cssPath);
document.head.appendChild(element);
}
if (settings.theme == "stylish") {
const element = createElement('stylish', settings.cssPath);
document.head.appendChild(element);
}
if (settings.extraFancy) {
cm.setOption('styleActiveLine', { nonEmpty: true });
const element = createElement('extra_fancy', settings.cssPath);
document.head.appendChild(element);
}
if (settings.extraCSS || settings.extraFancy || settings.theme == "stylish") {
const element = createElement('extra_css_fixes', settings.cssPath);
document.head.appendChild(element);
}
cm.refresh();
}
function cleanup(cm: any) {
if (!cm.state.richMarkdown) return;
for (let element of elements) {
const el = document.getElementById(idPrefix + element);
if (el) {
el.remove();
}
}
}
================================================
FILE: tsconfig.json
================================================
{
"compilerOptions": {
"outDir": "./dist/",
"module": "commonjs",
"target": "es2015",
"jsx": "react",
"allowJs": true,
"baseUrl": "."
}
}
================================================
FILE: webpack.config.js
================================================
// -----------------------------------------------------------------------------
// This file is used to build the plugin file (.jpl) and plugin info (.json). It
// is recommended not to edit this file as it would be overwritten when updating
// the plugin framework. If you do make some changes, consider using an external
// JS file and requiring it here to minimize the changes. That way when you
// update, you can easily restore the functionality you've added.
// -----------------------------------------------------------------------------
/* eslint-disable no-console */
const path = require('path');
const crypto = require('crypto');
const fs = require('fs-extra');
const chalk = require('chalk');
const CopyPlugin = require('copy-webpack-plugin');
const tar = require('tar');
const glob = require('glob');
const execSync = require('child_process').execSync;
// AUTO-GENERATED by updateCategories
const allPossibleCategories = [{ 'name': 'appearance' }, { 'name': 'developer tools' }, { 'name': 'productivity' }, { 'name': 'themes' }, { 'name': 'integrations' }, { 'name': 'viewer' }, { 'name': 'search' }, { 'name': 'tags' }, { 'name': 'editor' }, { 'name': 'files' }, { 'name': 'personal knowledge management' }];
// AUTO-GENERATED by updateCategories
const rootDir = path.resolve(__dirname);
const userConfigFilename = './plugin.config.json';
const userConfigPath = path.resolve(rootDir, userConfigFilename);
const distDir = path.resolve(rootDir, 'dist');
const srcDir = path.resolve(rootDir, 'src');
const publishDir = path.resolve(rootDir, 'publish');
const userConfig = {
extraScripts: [],
...(fs.pathExistsSync(userConfigPath) ? require(userConfigFilename) : {}),
};
const manifestPath = `${srcDir}/manifest.json`;
const packageJsonPath = `${rootDir}/package.json`;
const allPossibleScreenshotsType = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
const manifest = readManifest(manifestPath);
const pluginArchiveFilePath = path.resolve(publishDir, `${manifest.id}.jpl`);
const pluginInfoFilePath = path.resolve(publishDir, `${manifest.id}.json`);
const { builtinModules } = require('node:module');
// Webpack5 doesn't polyfill by default and displays a warning when attempting to require() built-in
// node modules. Set these to false to prevent Webpack from warning about not polyfilling these modules.
// We don't need to polyfill because the plugins run in Electron's Node environment.
const moduleFallback = {};
for (const moduleName of builtinModules) {
moduleFallback[moduleName] = false;
}
const getPackageJson = () => {
return JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
};
function validatePackageJson() {
const content = getPackageJson();
if (!content.name || content.name.indexOf('joplin-plugin-') !== 0) {
console.warn(chalk.yellow(`WARNING: To publish the plugin, the package name should start with "joplin-plugin-" (found "${content.name}") in ${packageJsonPath}`));
}
if (!content.keywords || content.keywords.indexOf('joplin-plugin') < 0) {
console.warn(chalk.yellow(`WARNING: To publish the plugin, the package keywords should include "joplin-plugin" (found "${JSON.stringify(content.keywords)}") in ${packageJsonPath}`));
}
if (content.scripts && content.scripts.postinstall) {
console.warn(chalk.yellow(`WARNING: package.json contains a "postinstall" script. It is recommended to use a "prepare" script instead so that it is executed before publish. In ${packageJsonPath}`));
}
}
function fileSha256(filePath) {
const content = fs.readFileSync(filePath);
return crypto.createHash('sha256').update(content).digest('hex');
}
function currentGitInfo() {
try {
let branch = execSync('git rev-parse --abbrev-ref HEAD', { stdio: 'pipe' }).toString().trim();
const commit = execSync('git rev-parse HEAD', { stdio: 'pipe' }).toString().trim();
if (branch === 'HEAD') branch = 'master';
return `${branch}:${commit}`;
} catch (error) {
const messages = error.message ? error.message.split('\n') : [''];
console.info(chalk.cyan('Could not get git commit (not a git repo?):', messages[0].trim()));
console.info(chalk.cyan('Git information will not be stored in plugin info file'));
return '';
}
}
function validateCategories(categories) {
if (!categories) return null;
if ((categories.length !== new Set(categories).size)) throw new Error('Repeated categories are not allowed');
// eslint-disable-next-line github/array-foreach -- Old code before rule was applied
categories.forEach(category => {
if (!allPossibleCategories.map(category => { return category.name; }).includes(category)) throw new Error(`${category} is not a valid category. Please make sure that the category name is lowercase. Valid categories are: \n${allPossibleCategories.map(category => { return category.name; })}\n`);
});
}
function validateScreenshots(screenshots) {
if (!screenshots) return null;
for (const screenshot of screenshots) {
if (!screenshot.src) throw new Error('You must specify a src for each screenshot');
// Avoid attempting to download and verify URL screenshots.
if (screenshot.src.startsWith('https://') || screenshot.src.startsWith('http://')) {
continue;
}
const screenshotType = screenshot.src.split('.').pop();
if (!allPossibleScreenshotsType.includes(screenshotType)) throw new Error(`${screenshotType} is not a valid screenshot type. Valid types are: \n${allPossibleScreenshotsType}\n`);
const screenshotPath = path.resolve(rootDir, screenshot.src);
// Max file size is 1MB
const fileMaxSize = 1024;
const fileSize = fs.statSync(screenshotPath).size / 1024;
if (fileSize > fileMaxSize) throw new Error(`Max screenshot file size is ${fileMaxSize}KB. ${screenshotPath} is ${fileSize}KB`);
}
}
function readManifest(manifestPath) {
const content = fs.readFileSync(manifestPath, 'utf8');
const output = JSON.parse(content);
if (!output.id) throw new Error(`Manifest plugin ID is not set in ${manifestPath}`);
validateCategories(output.categories);
validateScreenshots(output.screenshots);
return output;
}
function createPluginArchive(sourceDir, destPath) {
const distFiles = glob.sync(`${sourceDir}/**/*`, { nodir: true, windowsPathsNoEscape: true })
.map(f => f.substr(sourceDir.length + 1));
if (!distFiles.length) throw new Error('Plugin archive was not created because the "dist" directory is empty');
fs.removeSync(destPath);
tar.create(
{
strict: true,
portable: true,
file: destPath,
cwd: sourceDir,
sync: true,
},
distFiles,
);
console.info(chalk.cyan(`Plugin archive has been created in ${destPath}`));
}
const writeManifest = (manifestPath, content) => {
fs.writeFileSync(manifestPath, JSON.stringify(content, null, '\t'), 'utf8');
};
function createPluginInfo(manifestPath, destPath, jplFilePath) {
const contentText = fs.readFileSync(manifestPath, 'utf8');
const content = JSON.parse(contentText);
content._publish_hash = `sha256:${fileSha256(jplFilePath)}`;
content._publish_commit = currentGitInfo();
writeManifest(destPath, content);
}
function onBuildCompleted() {
try {
fs.removeSync(path.resolve(publishDir, 'index.js'));
createPluginArchive(distDir, pluginArchiveFilePath);
createPluginInfo(manifestPath, pluginInfoFilePath, pluginArchiveFilePath);
validatePackageJson();
} catch (error) {
console.error(chalk.red(error.message));
}
}
const baseConfig = {
mode: 'production',
target: 'node',
stats: 'errors-only',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
...userConfig.webpackOverrides,
};
const pluginConfig = { ...baseConfig, entry: './src/index.ts',
resolve: {
alias: {
api: path.resolve(__dirname, 'api'),
},
fallback: moduleFallback,
// JSON files can also be required from scripts so we include this.
// https://github.com/joplin/plugin-bibtex/pull/2
extensions: ['.js', '.tsx', '.ts', '.json'],
},
output: {
filename: 'index.js',
path: distDir,
},
plugins: [
new CopyPlugin({
patterns: [
{
from: '**/*',
context: path.resolve(__dirname, 'src'),
to: path.resolve(__dirname, 'dist'),
globOptions: {
ignore: [
// All TypeScript files are compiled to JS and
// already copied into /dist so we don't copy them.
'**/*.ts',
'**/*.tsx',
],
},
},
],
}),
] };
// These libraries can be included with require(...) or
// joplin.require(...) from content scripts.
const externalContentScriptLibraries = [
'@codemirror/view',
'@codemirror/state',
'@codemirror/search',
'@codemirror/language',
'@codemirror/autocomplete',
'@codemirror/commands',
'@codemirror/highlight',
'@codemirror/lint',
'@codemirror/lang-html',
'@codemirror/lang-markdown',
'@codemirror/language-data',
'@lezer/common',
'@lezer/markdown',
'@lezer/highlight',
];
const extraScriptExternals = {};
for (const library of externalContentScriptLibraries) {
extraScriptExternals[library] = { commonjs: library };
}
const extraScriptConfig = {
...baseConfig,
resolve: {
alias: {
api: path.resolve(__dirname, 'api'),
},
fallback: moduleFallback,
extensions: ['.js', '.tsx', '.ts', '.json'],
},
// We support requiring @codemirror/... libraries through require('@codemirror/...')
externalsType: 'commonjs',
externals: extraScriptExternals,
};
const createArchiveConfig = {
stats: 'errors-only',
entry: './dist/index.js',
resolve: {
fallback: moduleFallback,
},
output: {
filename: 'index.js',
path: publishDir,
},
plugins: [{
apply(compiler) {
compiler.hooks.done.tap('archiveOnBuildListener', onBuildCompleted);
},
}],
};
function resolveExtraScriptPath(name) {
const relativePath = `./src/${name}`;
const fullPath = path.resolve(`${rootDir}/${relativePath}`);
if (!fs.pathExistsSync(fullPath)) throw new Error(`Could not find extra script: "${name}" at "${fullPath}"`);
const s = name.split('.');
s.pop();
const nameNoExt = s.join('.');
return {
entry: relativePath,
output: {
filename: `${nameNoExt}.js`,
path: distDir,
library: 'default',
libraryTarget: 'commonjs',
libraryExport: 'default',
},
};
}
function buildExtraScriptConfigs(userConfig) {
if (!userConfig.extraScripts.length) return [];
const output = [];
for (const scriptName of userConfig.extraScripts) {
const scriptPaths = resolveExtraScriptPath(scriptName);
output.push({ ...extraScriptConfig, entry: scriptPaths.entry,
output: scriptPaths.output });
}
return output;
}
const increaseVersion = version => {
try {
const s = version.split('.');
const d = Number(s[s.length - 1]) + 1;
s[s.length - 1] = `${d}`;
return s.join('.');
} catch (error) {
error.message = `Could not parse version number: ${version}: ${error.message}`;
throw error;
}
};
const updateVersion = () => {
const packageJson = getPackageJson();
packageJson.version = increaseVersion(packageJson.version);
fs.writeFileSync(packageJsonPath, `${JSON.stringify(packageJson, null, 2)}\n`, 'utf8');
const manifest = readManifest(manifestPath);
manifest.version = increaseVersion(manifest.version);
writeManifest(manifestPath, manifest);
if (packageJson.version !== manifest.version) {
console.warn(chalk.yellow(`Version numbers have been updated but they do not match: package.json (${packageJson.version}), manifest.json (${manifest.version}). Set them to the required values to get them in sync.`));
} else {
console.info(packageJson.version);
}
};
function main(environ) {
const configName = environ['joplin-plugin-config'];
if (!configName) throw new Error('A config file must be specified via the --joplin-plugin-config flag');
// Webpack configurations run in parallel, while we need them to run in
// sequence, and to do that it seems the only way is to run webpack multiple
// times, with different config each time.
const configs = {
// Builds the main src/index.ts and copy the extra content from /src to
// /dist including scripts, CSS and any other asset.
buildMain: [pluginConfig],
// Builds the extra scripts as defined in plugin.config.json. When doing
// so, some JavaScript files that were copied in the previous might be
// overwritten here by the compiled version. This is by design. The
// result is that JS files that don't need compilation, are simply
// copied to /dist, while those that do need it are correctly compiled.
buildExtraScripts: buildExtraScriptConfigs(userConfig),
// Ths config is for creating the .jpl, which is done via the plugin, so
// it doesn't actually need an entry and output, however webpack won't
// run without this. So we give it an entry that we know is going to
// exist and output in the publish dir. Then the plugin will delete this
// temporary file before packaging the plugin.
createArchive: [createArchiveConfig],
};
// If we are running the first config step, we clean up and create the build
// directories.
if (configName === 'buildMain') {
fs.removeSync(distDir);
fs.removeSync(publishDir);
fs.mkdirpSync(publishDir);
}
if (configName === 'updateVersion') {
updateVersion();
return [];
}
return configs[configName];
}
module.exports = (env) => {
let exportedConfigs = [];
try {
exportedConfigs = main(env);
} catch (error) {
console.error(error.message);
process.exit(1);
}
if (!exportedConfigs.length) {
// Nothing to do - for example where there are no external scripts to
// compile.
process.exit(0);
}
return exportedConfigs;
};
*
* ### Left to right with thumbnails
*
* 
*
* ### Top to bottom with editable title
*
* 
*
* desktop
*/
export default class JoplinViewsNoteList {
private plugin_;
private store_;
constructor(plugin: Plugin, store: Store);
registerRenderer(renderer: ListRenderer): Promise