wiki/editor/src/menu.js

import $ from 'jquery'
import 'jquery-contextmenu'
import copy from 'copy-text-to-clipboard'

function renderTree(tree) {
    if (!tree) return []

    let recRenderTree = (tree, indent) => {
        return _.flatMapDeep(tree, (item) => [
            _.repeat("    ", item.indented - indent) + item.text,
            recRenderTree(item.children, indent),
        ])
    }

    return recRenderTree(tree, tree[0].indented)
}

function connectContextMenu(editor) {
    $.contextMenu({
        selector: '.marker',
        items: {
            createNewPage: {
                name: 'Create page from item',
                callback: function (key, opt) {
                    console.log('Create page from item', key, opt)
                },
                className: 'action-new-page'
            },
            copy: {
                name: 'Copy',
                callback: function (key, opt) {
                    editor.flat(this).then(result => {
                        let data = JSON.stringify(result);
                        copy(data)
                    })
                },
                className: 'action-copy'
            },
            copyLine: {
                name: 'Copy line',
                callback: function (key, opt) {
                    editor.copy(this, {recursive: false}).then(result => {
                        copy(result.text)
                    })
                },
                className: 'action-copy-line'
            },
            zoom: {
                name: 'Zoom in',
                callback: function (key, opt) {
                    editor.zoomin(this).then(id => {
                        location.href = '/edit/' + id;
                    })
                }
            },
            debug: {
                name: 'Debug block',
                callback: function (key, opt) {
                    editor.copy(this, {recursive: true}).then(console.log)
                }
            },
            addCheckbox: {
                name: 'Add checkbox',
                visible: function (key, opt) {
                    let item = $(this).parents('.list-item')
                    let id = item.attr('data-id')
                    let [found] = editor.actions.hasCheckbox.call(editor, id)
                    return !found
                },
                callback: function (key, opt) {
                    let item = $(this).parents('.list-item')
                    let id = item.attr('data-id')
                    editor.actions.addCheckbox.call(editor, id)
                }
            },
            removeCheckbox: {
                name: 'Remove checkbox',
                visible: function (key, opt) {
                    let item = $(this).parents('.list-item')
                    let id = item.attr('data-id')
                    let [found] = editor.actions.hasCheckbox.call(editor, id)
                    return found
                },
                callback: function (key, opt) {
                    let item = $(this).parents('.list-item')
                    let id = item.attr('data-id')
                    editor.actions.removeCheckbox.call(editor, id)
                }
            },
            markTodo: {
                name: 'Mark To Do',
                visible: function (key, opt) {
                    let item = $(this).parents('.list-item')
                    let id = item.attr('data-id')
                    let [found, todo] = editor.actions.hasCheckbox.call(editor, id)
                    return found && !todo
                },
                callback: function (key, opt) {
                    let item = $(this).parents('.list-item')
                    let id = item.attr('data-id')
                    editor.actions.markTodo.call(editor, id)
                }
            },
            markDone: {
                name: 'Mark Done',
                visible: function (key, opt) {
                    let item = $(this).parents('.list-item')
                    let id = item.attr('data-id')
                    let [found, todo] = editor.actions.hasCheckbox.call(editor, id)
                    return found && todo
                },
                callback: function (key, opt) {
                    let item = $(this).parents('.list-item')
                    let id = item.attr('data-id')
                    editor.actions.markDone.call(editor, id)
                }
            },
            removeCompleted: {
                name: 'Remove completed',
                callback: function (key, opt) {
                    let item = $(this).parents('.list-item')
                    let id = item.attr('data-id')
                    editor.actions.removeCompleted.call(editor, id)
                    editor.render()
                }
            },
            sort: {
                name: 'Sort',
                items: [
                    {
                        name: 'Title (A-Z)',
                        callback: function (key, opt) {
                            let item = $(this).parents('.list-item')
                            let id = item.attr('data-id')
                            editor.actions.sort.call(editor, id, 'text', 'asc')
                            editor.render()
                        }
                    },
                    {
                        name: 'Title (Z-A)',
                        callback: function (key, opt) {
                            let item = $(this).parents('.list-item')
                            let id = item.attr('data-id')
                            editor.actions.sort.call(editor, id, 'text', 'desc')
                            editor.render()
                        }
                    },
                    {
                        name: 'Checked first',
                        callback: function (key, opt) {
                            let item = $(this).parents('.list-item')
                            let id = item.attr('data-id')
                            editor.actions.sort.call(editor, id, 'todo', 'desc')
                            editor.render()
                        }
                    },
                    {
                        name: 'Unchecked first',
                        callback: function (key, opt) {
                            let item = $(this).parents('.list-item')
                            let id = item.attr('data-id')
                            editor.actions.sort.call(editor, id, 'todo', 'asc')
                            editor.render()
                        }
                    }
                ]
            },

            // TODO
            //  - Sort
            //    - Date (on item) (new-old)
            //    - Date (on item) (old-new)
            //    - Updated (new to old)
            //    - Updated (old to new)
            //    - Created (new to old)
            //    - Created (old to new)
            //    - Reverse
            //  - Move To
            //  - Indent
        }
    });
}

export default {
    connectContextMenu: connectContextMenu
}