d2e24ebae0
* Add a dropdown picker for custom task states
Add a dropdown picker for custom task states that appears as a small
triangle next to the `[state]` allowing to quickly switch between
defined states with autocomplete.
States marked as done receive strikethrough styling on the task text.
Each state can be styled individually using the `data-task-state`
attribute, for example:
```space-style
[data-task-state=PLANNED] .sb-task-state {
color: black;
background-color: orange;
}
```
Signed-off-by: Matouš Jan Fialka <mjf@mjf.cz>
* Keep the current task state visible while the dropdown picker is open
Keep the current task state visible while the dropdown picker is open by
disabling built-in filtering and handling it manually — when the state
text exactly matches a known state all options are shown, otherwise
results are filtered by what the user has typed so far.
Signed-off-by: Matouš Jan Fialka <mjf@mjf.cz>
* Added on-hover completion styling
* Fix: Show all defined task states in the dropdown when clicking the picker on an unrecognized state instead of showing an empty menu
Signed-off-by: Matouš Jan Fialka <mjf@mjf.cz>
---------
Signed-off-by: Matouš Jan Fialka <mjf@mjf.cz>
Co-authored-by: Zef Hemel <zef@zef.me>
77 lines
2.5 KiB
TypeScript
77 lines
2.5 KiB
TypeScript
import type { Extension } from "@codemirror/state";
|
|
import type { Client } from "../client.ts";
|
|
import { blockquotePlugin } from "./block_quote.ts";
|
|
import { admonitionPlugin } from "./admonition.ts";
|
|
import { hideHeaderMarkPlugin, hideMarksPlugin } from "./hide_mark.ts";
|
|
import { cleanBlockPlugin } from "./block.ts";
|
|
import { linkPlugin } from "./link.ts";
|
|
import { listBulletPlugin } from "./list.ts";
|
|
import { tablePlugin } from "./table.ts";
|
|
import { taskListPlugin } from "./task.ts";
|
|
import { cleanWikiLinkPlugin } from "./wiki_link.ts";
|
|
import { fencedCodePlugin } from "./fenced_code.ts";
|
|
import { frontmatterPlugin } from "./frontmatter.ts";
|
|
import { cleanEscapePlugin } from "./escapes.ts";
|
|
import { luaDirectivePlugin } from "./lua_directive.ts";
|
|
import { hashtagPlugin } from "./hashtag.ts";
|
|
import type { ClickEvent } from "@silverbulletmd/silverbullet/type/client";
|
|
import { attributePlugin } from "./attribute.ts";
|
|
import { customSyntaxPlugin } from "./custom_syntax_widget.ts";
|
|
import { footnotePlugin } from "./footnote.ts";
|
|
|
|
export function cleanModePlugins(client: Client) {
|
|
const pluginsNeededEvenWhenRenderingSyntax = [
|
|
luaDirectivePlugin(client),
|
|
cleanWikiLinkPlugin(client),
|
|
hashtagPlugin(),
|
|
attributePlugin(),
|
|
frontmatterPlugin(client),
|
|
customSyntaxPlugin(client),
|
|
];
|
|
|
|
if (client.ui.viewState.uiOptions.markdownSyntaxRendering) {
|
|
return pluginsNeededEvenWhenRenderingSyntax;
|
|
}
|
|
|
|
return [
|
|
...pluginsNeededEvenWhenRenderingSyntax,
|
|
linkPlugin(client),
|
|
blockquotePlugin(),
|
|
admonitionPlugin(),
|
|
hideMarksPlugin(),
|
|
hideHeaderMarkPlugin(),
|
|
cleanBlockPlugin(),
|
|
fencedCodePlugin(client),
|
|
taskListPlugin({
|
|
// TODO: Move this logic elsewhere?
|
|
onCheckboxClick: (pos) => {
|
|
const clickEvent: ClickEvent = {
|
|
page: client.currentName(),
|
|
altKey: false,
|
|
ctrlKey: false,
|
|
metaKey: false,
|
|
pos: pos,
|
|
};
|
|
// Propagate click event from checkbox
|
|
void client.dispatchClickEvent(clickEvent);
|
|
},
|
|
getView: () => client.editorView,
|
|
doneStates: (() => {
|
|
const taskStates = client.config.get("taskStates", {});
|
|
const done = new Set<string>();
|
|
for (const [name, spec] of Object.entries(taskStates) as [
|
|
string,
|
|
any,
|
|
][]) {
|
|
if (spec.done) done.add(name);
|
|
}
|
|
return done;
|
|
})(),
|
|
}),
|
|
listBulletPlugin(),
|
|
tablePlugin(client),
|
|
cleanEscapePlugin(),
|
|
...footnotePlugin(() => client.editorView),
|
|
] as Extension[];
|
|
}
|