self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-05-13 21:46:37 +02:00
Code Issues Releases Activity

Desktop: Fixed a few WISIWYG issues with checkboxes

Browse Source
This commit is contained in:
Laurent Cozic 2020-03-23 01:32:28 +00:00
parent 41acdce165
commit 03e8d921d3
5 changed files with 37 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
ElectronClient/gui/editors/TinyMCE/plugins/lists.js
View File

@ -1485,7 +1485,7 @@
};
var isCustomList = function (list) {
return /\btox\-/.test(list.className) || /joplinChecklist/.test(list.className);
return /\btox\-/.test(list.className);
};
var listToggleActionFromListName = function (listName) {
@ -1521,18 +1521,21 @@
}
return 'regular';
}
function isJoplinChecklistItem(element) {
if (element.nodeName !== 'LI')
return false;
var listType = findContainerListTypeFromElement(element);
return listType === 'joplinChecklist';
}
function addJoplinChecklistCommands(editor, ToggleList) {
editor.addCommand('ToggleJoplinChecklistItem', function (ui, detail) {
var element = detail.element;
if (element.nodeName !== 'LI')
if (!isJoplinChecklistItem(element))
return;
var listType = findContainerListTypeFromElement(element);
if (listType === 'joplinChecklist') {
if (!element.classList || !element.classList.contains('checked')) {
element.classList.add('checked');
} else {
element.classList.remove('checked');
}
if (!element.classList || !element.classList.contains('checked')) {
element.classList.add('checked');
} else {
element.classList.remove('checked');
}
});
editor.addCommand('InsertJoplinChecklist', function (ui, detail) {
@ -1643,7 +1646,6 @@
if (detail === void 0) {
detail = {};
}
console.info('applyList', listName, detail);
var rng = editor.selection.getRng(true);
var bookmark;
var listItemName = 'LI';
@ -1661,12 +1663,10 @@
var listBlock, sibling;
sibling = block.previousSibling;
if (sibling && isListNode(sibling) && sibling.nodeName === listName && hasCompatibleStyle(dom, sibling, detail)) {
console.info('applyList 1');
listBlock = sibling;
block = dom.rename(block, listItemName);
sibling.appendChild(block);
} else {
console.info('applyList 2');
listBlock = dom.create(listName);
if (detail.listType === 'joplinChecklist') {
listBlock.classList.add('joplin-checklist');
@ -1727,18 +1727,15 @@
};
var updateList = function (editor, list, listName, detail) {
if (list.nodeName !== listName) {
console.info('updateList 1', list, listName, detail);
var newList = editor.dom.rename(list, listName);
updateListWithDetails(editor.dom, newList, detail);
fireListEvent(editor, listToggleActionFromListName(listName), newList);
} else {
console.info('updateList 2', list, listName, detail);
updateListWithDetails(editor.dom, list, detail);
fireListEvent(editor, listToggleActionFromListName(listName), list);
}
};
var toggleMultipleLists = function (editor, parentList, lists, listName, detail) {
console.info('-- toggleMultipleLists', lists, listName, detail);
if (parentList.nodeName === listName && !hasListStyleDetail(detail)) {
flattenListSelection(editor);
} else {
@ -1753,19 +1750,14 @@
return 'list-style-type' in detail;
};
var toggleSingleList = function (editor, parentList, listName, detail) {
console.info('-- toggleSingleList', listName, detail);
if (parentList === editor.getBody()) {
return;
}
if (parentList) {
console.info('toggleSingleList 1');
var listType = findContainerListTypeFromElement(parentList);
console.info('List type', listType, '(detail)', detail);
if (parentList.nodeName === listName && !hasListStyleDetail(detail) && !isCustomList(parentList) && listType === detail.listType) {
console.info('toggleSingleList 2');
flattenListSelection(editor);
} else {
console.info('toggleSingleList 3');
var bookmark = createBookmark(editor.selection.getRng(true));
updateListWithDetails(editor.dom, parentList, detail);
var newList = editor.dom.rename(parentList, listName);
@ -1774,13 +1766,11 @@
fireListEvent(editor, listToggleActionFromListName(listName), newList);
}
} else {
console.info('toggleSingleList 4');
applyList(editor, listName, detail);
fireListEvent(editor, listToggleActionFromListName(listName), parentList);
}
};
var toggleList = function (editor, listName, detail) {
console.info('==== TOGGLE LIST', listName, detail);
var parentList = getParentList(editor);
var selectedSubLists = getSelectedSubLists(editor);
detail = __assign({ listType: 'regular' }, detail);
@ -2092,9 +2082,6 @@
}
return -1;
};
var editorListMutationHandler = function (event) {
console.info('editorListMutationHandler', event);
};
var listState = function (editor, listName, options) {
if (options === void 0) {
options = {};
@ -2109,17 +2096,17 @@
buttonApi.setActive(listType === options.listType && lists.length > 0 && lists[0].nodeName === listName && !isCustomList(lists[0]));
};
var editorClickHandler = function (event) {
if (!isJoplinChecklistItem(event.target))
return;
editor.execCommand('ToggleJoplinChecklistItem', false, { element: event.target });
};
if (options.listType === 'joplinChecklist') {
editor.on('click', editorClickHandler);
editor.on('ListMutation', editorListMutationHandler);
}
editor.on('NodeChange', nodeChangeHandler);
return function () {
if (options.listType === 'joplinChecklist') {
editor.off('click', editorClickHandler);
editor.off('ListMutation', editorListMutationHandler);
}
editor.off('NodeChange', nodeChangeHandler);
};

8
Modules/TinyMCE/JoplinLists/README.md
View File

@ -2,4 +2,10 @@
This is based on https://github.com/tinymce/tinymce/tree/59748a11303fb7cf00fdb8c9392dcb082ee9d965/modules/tinymce/src/plugins/lists
But with support for Joplin checkboxes.
But with support for Joplin checkboxes.
## Building
Use `npm run build` to build the plugin, which will also copy the compiled version to the right ElectronClient sub-directory.
To test the plugin, use `npm run buildAndStart`, which will build the plugin and start the desktop application.

20
Modules/TinyMCE/JoplinLists/src/main/ts/listModel/JoplinListUtil.ts
View File

@ -23,17 +23,21 @@ export function findContainerListTypeFromElement(element) {
return 'regular';
}
export function isJoplinChecklistItem(element) {
if (element.nodeName !== 'LI') return false;
const listType = findContainerListTypeFromElement(element);
return listType === 'joplinChecklist';
}
export function addJoplinChecklistCommands(editor, ToggleList) {
editor.addCommand('ToggleJoplinChecklistItem', function (ui, detail) {
const element = detail.element;
if (element.nodeName !== 'LI') return;
const listType = findContainerListTypeFromElement(element);
if (listType === 'joplinChecklist') {
if (!element.classList || !element.classList.contains('checked')) {
element.classList.add('checked');
} else {
element.classList.remove('checked');
}
if (!isJoplinChecklistItem(element)) return;
if (!element.classList || !element.classList.contains('checked')) {
element.classList.add('checked');
} else {
element.classList.remove('checked');
}
});

3
Modules/TinyMCE/JoplinLists/src/main/ts/ui/Buttons.ts
View File

@ -9,7 +9,7 @@ import Tools from 'tinymce/core/api/util/Tools';
import * as NodeType from '../core/NodeType';
import Editor from 'tinymce/core/api/Editor';
import { isCustomList } from '../core/Util';
import { findContainerListTypeFromEvent } from '../listModel/JoplinListUtil';
import { findContainerListTypeFromEvent, isJoplinChecklistItem } from '../listModel/JoplinListUtil';
const findIndex = function (list, predicate) {
for (let index = 0; index < list.length; index++) {
@ -38,6 +38,7 @@ const listState = function (editor: Editor, listName, options:any = {}) {
};
const editorClickHandler = (event) => {
if (!isJoplinChecklistItem(event.target)) return;
editor.execCommand('ToggleJoplinChecklistItem', false, { element: event.target });
}

3
joplin.sublime-project
View File

@ -46,7 +46,8 @@
"ElectronClient/gui/utils/NoteText.js",
"ElectronClient/gui/editors/TinyMCE/plugins/lists.js",
"ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/mermaid.js",
"ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/fence.js"
"ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/fence.js",
"ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/checkbox.js"
],
"folder_exclude_patterns":
[