*
+ * desktop
*/
export default class JoplinViewsNoteList {
private plugin_;
diff --git a/packages/generator-joplin/generators/app/templates/api/JoplinViewsPanels.d.ts b/packages/generator-joplin/generators/app/templates/api/JoplinViewsPanels.d.ts
index 4d4c52701..57e1f789f 100644
--- a/packages/generator-joplin/generators/app/templates/api/JoplinViewsPanels.d.ts
+++ b/packages/generator-joplin/generators/app/templates/api/JoplinViewsPanels.d.ts
@@ -1,12 +1,17 @@
import Plugin from '../Plugin';
import { ViewHandle } from './types';
/**
- * Allows creating and managing view panels. View panels currently are
- * displayed at the right of the sidebar and allows displaying any HTML
- * content (within a webview) and update it in real-time. For example it
+ * Allows creating and managing view panels. View panels allow displaying any HTML
+ * content (within a webview) and updating it in real-time. For example it
* could be used to display a table of content for the active note, or
* display various metadata or graph.
*
+ * On desktop, view panels currently are displayed at the right of the sidebar, though can
+ * be moved with "View" > "Change application layout".
+ *
+ * On mobile, view panels are shown in a tabbed dialog that can be opened using a
+ * toolbar button.
+ *
* [View the demo plugin](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/toc)
*/
export default class JoplinViewsPanels {
diff --git a/packages/generator-joplin/generators/app/templates/api/JoplinWindow.d.ts b/packages/generator-joplin/generators/app/templates/api/JoplinWindow.d.ts
index 231c55c3d..e16a8b4c7 100644
--- a/packages/generator-joplin/generators/app/templates/api/JoplinWindow.d.ts
+++ b/packages/generator-joplin/generators/app/templates/api/JoplinWindow.d.ts
@@ -12,6 +12,8 @@ export default class JoplinWindow {
* for the note viewer. It is the same as the "Custom stylesheet for
* Joplin-wide app styles" setting. See the [Load CSS Demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/load_css)
* for an example.
+ *
+ * desktop
*/
loadChromeCssFile(filePath: string): Promise
+ * Raw timestamp: {{updatedTimeMs}}
+ *
+ * `,
+ *
+ * ```
+ *
+ * See
+ * `[https://github.com/laurent22/joplin/blob/dev/packages/lib/services/noteList/renderViewProps.ts](renderViewProps.ts)`
+ * for the list of properties that have a default rendering.
*/
itemTemplate: string;
+ /**
+ * This property applies only when `multiColumns` is `true`. It is used to render something
+ * different for each note property.
+ *
+ * This is a map of actual dependencies to templates - you only need to return something if the
+ * default, as specified in `template`, is not enough.
+ *
+ * Again you need to return a Mustache template and it will be combined with the `template`
+ * property to create the final template. For example if you return a property named
+ * `formattedDate` from `onRenderNote`, you can insert it in the template using
+ * `{{formattedDate}}`. This string will replace `{{value}}` in the `template` property.
+ *
+ * So if the template property is set to `{{value}}`, the final template will be
+ * `{{formattedDate}}`.
+ *
+ * The property would be set as so:
+ *
+ * ```javascript
+ * itemValueTemplates: {
+ * 'note.user_updated_time': '{{formattedDate}}',
+ * }
+ * ```
+ */
+ itemValueTemplates?: ListRendererItemValueTemplates;
/**
* This user-facing text is used for example in the View menu, so that your
* renderer can be selected.
@@ -128,17 +207,15 @@ export interface ListRenderer {
*/
onRenderNote: OnRenderNoteHandler;
/**
- * This handler allows adding some interactivity to the note renderer -
- * whenever an input element within the item is changed (for example, when a
- * checkbox is clicked, or a text input is changed), this `onChange` handler
- * is going to be called.
+ * This handler allows adding some interactivity to the note renderer - whenever an input element
+ * within the item is changed (for example, when a checkbox is clicked, or a text input is
+ * changed), this `onChange` handler is going to be called.
*
- * You can inspect `event.elementId` to know which element had some changes,
- * and `event.value` to know the new value. `event.noteId` also tells you
- * what note is affected, so that you can potentially apply changes to it.
+ * You can inspect `event.elementId` to know which element had some changes, and `event.value`
+ * to know the new value. `event.noteId` also tells you what note is affected, so that you can
+ * potentially apply changes to it.
*
- * You specify the element ID, by setting a `data-id` attribute on the
- * input.
+ * You specify the element ID, by setting a `data-id` attribute on the input.
*
* For example, if you have such a template:
*
@@ -148,9 +225,26 @@ export interface ListRenderer {
*
* ```
*
- * The event handler will receive an event with `elementId` set to
- * `noteTitleInput`.
+ * The event handler will receive an event with `elementId` set to `noteTitleInput`.
+ *
+ * ## Default event handlers
+ *
+ * Currently one click event is automatically handled:
+ *
+ * If there is a checkbox with a `data-id="todo-checkbox"` attribute is present, it is going to
+ * automatically toggle the note to-do "completed" status.
+ *
+ * For example this is what is used in the default list renderer:
+ *
+ * ``
*/
onChange?: OnChangeHandler;
}
+export interface NoteListColumn {
+ name: ColumnName;
+ width: number;
+}
+export type NoteListColumns = NoteListColumn[];
+export declare const defaultWidth = 100;
+export declare const defaultListColumns: () => NoteListColumns;
export {};
diff --git a/packages/generator-joplin/generators/app/templates/api/noteListType.ts b/packages/generator-joplin/generators/app/templates/api/noteListType.ts
index 30aeb8351..a2657020e 100644
--- a/packages/generator-joplin/generators/app/templates/api/noteListType.ts
+++ b/packages/generator-joplin/generators/app/templates/api/noteListType.ts
@@ -11,46 +11,63 @@ export enum ItemFlow {
LeftToRight = 'leftToRight',
}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
export type RenderNoteView = Record
+ * Raw timestamp: {{updatedTimeMs}}
+ *
+ * `,
+ *
+ * ```
+ *
+ * See
+ * `[https://github.com/laurent22/joplin/blob/dev/packages/lib/services/noteList/renderViewProps.ts](renderViewProps.ts)`
+ * for the list of properties that have a default rendering.
*/
itemTemplate: string;
+ /**
+ * This property applies only when `multiColumns` is `true`. It is used to render something
+ * different for each note property.
+ *
+ * This is a map of actual dependencies to templates - you only need to return something if the
+ * default, as specified in `template`, is not enough.
+ *
+ * Again you need to return a Mustache template and it will be combined with the `template`
+ * property to create the final template. For example if you return a property named
+ * `formattedDate` from `onRenderNote`, you can insert it in the template using
+ * `{{formattedDate}}`. This string will replace `{{value}}` in the `template` property.
+ *
+ * So if the template property is set to `{{value}}`, the final template will be
+ * `{{formattedDate}}`.
+ *
+ * The property would be set as so:
+ *
+ * ```javascript
+ * itemValueTemplates: {
+ * 'note.user_updated_time': '{{formattedDate}}',
+ * }
+ * ```
+ */
+ itemValueTemplates?: ListRendererItemValueTemplates;
+
/**
* This user-facing text is used for example in the View menu, so that your
* renderer can be selected.
@@ -155,17 +257,15 @@ export interface ListRenderer {
onRenderNote: OnRenderNoteHandler;
/**
- * This handler allows adding some interactivity to the note renderer -
- * whenever an input element within the item is changed (for example, when a
- * checkbox is clicked, or a text input is changed), this `onChange` handler
- * is going to be called.
+ * This handler allows adding some interactivity to the note renderer - whenever an input element
+ * within the item is changed (for example, when a checkbox is clicked, or a text input is
+ * changed), this `onChange` handler is going to be called.
*
- * You can inspect `event.elementId` to know which element had some changes,
- * and `event.value` to know the new value. `event.noteId` also tells you
- * what note is affected, so that you can potentially apply changes to it.
+ * You can inspect `event.elementId` to know which element had some changes, and `event.value`
+ * to know the new value. `event.noteId` also tells you what note is affected, so that you can
+ * potentially apply changes to it.
*
- * You specify the element ID, by setting a `data-id` attribute on the
- * input.
+ * You specify the element ID, by setting a `data-id` attribute on the input.
*
* For example, if you have such a template:
*
@@ -175,8 +275,46 @@ export interface ListRenderer {
*
* ```
*
- * The event handler will receive an event with `elementId` set to
- * `noteTitleInput`.
+ * The event handler will receive an event with `elementId` set to `noteTitleInput`.
+ *
+ * ## Default event handlers
+ *
+ * Currently one click event is automatically handled:
+ *
+ * If there is a checkbox with a `data-id="todo-checkbox"` attribute is present, it is going to
+ * automatically toggle the note to-do "completed" status.
+ *
+ * For example this is what is used in the default list renderer:
+ *
+ * ``
*/
onChange?: OnChangeHandler;
}
+
+export interface NoteListColumn {
+ name: ColumnName;
+ width: number;
+}
+
+export type NoteListColumns = NoteListColumn[];
+
+export const defaultWidth = 100;
+
+export const defaultListColumns = () => {
+ const columns: NoteListColumns = [
+ {
+ name: 'note.is_todo',
+ width: 30,
+ },
+ {
+ name: 'note.user_updated_time',
+ width: defaultWidth,
+ },
+ {
+ name: 'note.title',
+ width: 0,
+ },
+ ];
+
+ return columns;
+};
diff --git a/packages/generator-joplin/generators/app/templates/api/types.ts b/packages/generator-joplin/generators/app/templates/api/types.ts
index 07c1de94a..a51b7fad1 100644
--- a/packages/generator-joplin/generators/app/templates/api/types.ts
+++ b/packages/generator-joplin/generators/app/templates/api/types.ts
@@ -26,6 +26,7 @@ export interface Command {
/**
* Code to be ran when the command is executed. It may return a result.
*/
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
execute(...args: any[]): Promise
+ * ...your html...
+ *
+ * ```
+ * 2. Add a child with class `joplin-source` that contains the original markdown that
+ * was rendered by your plugin. Include `data-joplin-source-open`, `data-joplin-source-close`,
+ * and `data-joplin-language` attributes.
+ * For example, if your plugin rendered the following code block,
+ * ````
+ * ```foo
+ * ... original source here ...
+ * ```
+ * ````
+ * then it should render to
+ * ```html
+ *
+ *
+ * ```
+ *
+ * See [the demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/content_script)
+ * for a complete example.
+ *
* ## Getting the settings from the renderer
*
* You can access your plugin settings from the renderer by calling
@@ -684,21 +749,21 @@ export enum ContentScriptType {
* }
* ```
*
- * - The `context` argument is currently unused but could be used later on
- * to provide access to your own plugin so that the content script and
- * plugin can communicate.
+ * - The `context` argument allows communicating with other parts of
+ * your plugin (see below).
*
* - The `plugin` key is your CodeMirror plugin. This is where you can
* register new commands with CodeMirror or interact with the CodeMirror
* instance as needed.
*
- * - The `codeMirrorResources` key is an array of CodeMirror resources that
+ * - **CodeMirror 5 only**: The `codeMirrorResources` key is an array of CodeMirror resources that
* will be loaded and attached to the CodeMirror module. These are made up
* of addons, keymaps, and modes. For example, for a plugin that want's to
* enable clojure highlighting in code blocks. `codeMirrorResources` would
* be set to `['mode/clojure/clojure']`.
+ * This field is ignored on mobile and when the desktop beta editor is enabled.
*
- * - The `codeMirrorOptions` key contains all the
+ * - **CodeMirror 5 only**: The `codeMirrorOptions` key contains all the
* [CodeMirror](https://codemirror.net/doc/manual.html#config) options
* that will be set or changed by this plugin. New options can alse be
* declared via
@@ -716,9 +781,11 @@ export enum ContentScriptType {
* must be provided for the plugin to be valid. Having multiple or all
* provided is also okay.
*
- * See also the [demo
- * plugin](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/codemirror_content_script)
- * for an example of all these keys being used in one plugin.
+ * See also:
+ * - The [demo plugin](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/codemirror_content_script)
+ * for an example of all these keys being used in one plugin.
+ * - See [the editor plugin tutorial](https://joplinapp.org/help/api/tutorials/cm6_plugin)
+ * for how to develop a plugin for the mobile editor and the desktop beta markdown editor.
*
* ## Posting messages from the content script to your plugin
*
... original source here ...+ * ... rendered HTML here ... + *