Editor Settings
The editor settings are sent to the editor and control the behavior of your editor, in particular:
  • user menu
  • main navigation
  • dashboards
  • start page
  • media library
  • text formatting
An example:
1
// projectConfig.editorSettings: {...}
2
{
3
userMenu: [
4
{
5
label: 'What is new',
6
data: {
7
lastUpdate: '2020-06-16T13:19:38.560Z'
8
},
9
icon: 'plus',
10
id: 'release_notes',
11
group: 'string:required',
12
// Use either 'href' (external link) or 'route' (internal link)
13
href: 'https://github.com/livingdocsIO/livingdocs-release-notes',
14
route: {
15
name: 'app.state'
16
}
17
}
18
],
19
mainNavigation: [
20
{liItem: 'articles'},
21
// liItem is a shortcut, one can also define it's own config
22
{
23
label: 'My Custom Articles',
24
route: {
25
name: 'app.articles'
26
},
27
icon: 'file-document',
28
scope: 'readArticles',
29
group: 'dashboards' // one of 'dashboards', 'preferences', 'admin'
30
},
31
{liItem: 'pages'},
32
{ // custom task dashboard
33
label: 'Proofreading',
34
dashboard: 'kanban-proofreading',
35
icon: 'clipboard-check'
36
},
37
{ // custom document dashboard
38
label: 'Authors',
39
dashboard: 'authors-dashboard',
40
icon: 'account'
41
},
42
{liItem: 'mediaLibrary'},
43
{liItem: 'lists'},
44
{liItem: 'menus'},
45
{liItem: 'contentSetup'},
46
{ // external link
47
label: 'Livingdocs Website',
48
icon: 'rocket',
49
href: 'https://www.livingdocs.io',
50
group: 'preferences'
51
},
52
{liItem: 'projectSettings'},
53
{liItem: 'serverAdmin'}
54
],
55
dashboards: [{
56
handle: 'kanban-proofreading',
57
type: 'taskBoard',
58
pageTitle: 'Proofreading',
59
taskName: 'proofreading',
60
throttleTime: 2000, // ms
61
displayFilters: ['documentState', 'timeRange']
62
}, {
63
handle: 'authors-dashboard',
64
type: 'dashboard',
65
pageTitle: 'Author Management',
66
entityLabel: 'Author',
67
baseFilters: [
68
{type: 'documentType', value: 'data-record'},
69
{type: 'sortBy', value: '-updated_at'}
70
],
71
displayFilters: ['documentState', 'timeRange'],
72
sort: '-updated_at',
73
fields: ['metadata.*'],
74
componentName: 'bluewinDashboardListItem'
75
}],
76
startPage: {
77
path: '/articles'
78
},
79
mediaLibrary: {
80
showUi: true, // default true
81
altTextPrefilling: {
82
metadataPropertyName: 'caption'
83
},
84
componentDirectivesPrefilling: [
85
{metadataPropertyName: 'source', directiveName: 'source'},
86
{metadataPropertyName: 'caption', directiveName: 'caption'}
87
],
88
dashboard: {
89
displayFilters: ['timeRange']
90
},
91
editorSelection: {
92
displayFilters: ['timeRange']
93
},
94
textFormatting: {
95
bold: {enabled: true},
96
italic: {enabled: true},
97
superscript: {enabled: false},
98
subscript: {enabled: false},
99
quotes: {enabled: true, open: 'β€ž', close: 'β€œ'},
100
singleQuotes: {enabled: true, open: 'β€š', close: 'β€˜'},
101
link: {enabled: true},
102
specialChars: {enabled: true}
103
}
104
}
105
}
Copied!

User Menu

Makes it possible to configure custom entries within the Livingdocs user menu. If given a userMenu.data.lastUpdate property, it will visually indicate changes to the user. While you can add additional menu items, it is not possible to remove or alter the default Livingdocs menu items.
Custom user menu

Main Navigation

Configures the main navigation in Livingdocs. You can either configure a predefined liItem, link a custom dashboard or link an external page.
The possible values for liItem are: 'articles', 'pages', 'dataRecords', 'mediaLibrary', 'proofreading', 'lists', 'menus', 'tags' (imatrics), 'contentSetup', 'projectSettings', 'serverAdmin' (enterprise only)
For custom dashboards you configure the handle of your custom dashboard (see below) in the dashboard key. For external links you set the href property. For both you can define: icon (visual icon in the main nav), group (any of 'preferences', 'dashboards', 'custom', 'top') and label (visual title).

Dashboards

The dashboards entry allows you to configure custom dashboards, e.g. for authors (data-records) or proofreading (tasks).
There are 3 types of custom dashboards (type property):
  • dashboard
  • kanbanBoard
  • taskBoard (predefined kanbanBoard for a task)
Kanban Boards are very similar to dashboards, except for having multiple result columns. Each result column shows a list of documents just as a single column dashboard does. The documents cannot be manually sorted or moved between columns, instead each column typically has its own filter settings.
For example a task board will show all tasks in the requested state in one column and tasks with the state inProgress and done in the other columns. In order to move a card into another column you simply have to open the document and move the task into another state.

Common Dashboard Properties

Custom dashboards have some basic properties in common which are described in more detail below.

handle

Identifier for a custom dashboard. Is also used as a reference for the main navigation​

type

Type of the dashboard, one of these: dashboard, kanbanBoard, taskBoard

displayFilters

​Display Filters are filters that the user can set in the UI (below the search input)

baseFilters

​Base Filters are invisible filters and applied to every search (including the default result list)

sort

Sort the result, possible values are:
  • relevance (default),
  • -created_at / created_at,
  • -updated_at / updated_at
  • a metadata property e.g. metadata.proofreading.priority

Example: Dashboard

1
dashboards: [{
2
handle: 'gallery-dashboard',
3
type: 'dashboard',
4
pageTitle: 'Gallery Board',
5
// Label used to describe the documents in this Dashboard
6
entityLabel: 'Article',
7
// Invisible base filters applied to every search (including the default result list)
8
baseFilters: [{type: 'documentType', value: 'article'}],
9
// Filters shown to the user below the search input
10
displayFilters: ['documentState', 'timeRange'],
11
sort: '-updated_at',
12
// fields to be returned from the server (not all metadata fields are returned by default)
13
fields: ['metadata.*'],
14
// Enterprise only: This is the name of the vue component used in the result list
15
componentName: 'liHeroCard',
16
// Enterprise only: The componentOptions are injected into the component
17
// `liHeroCard` (in this example)
18
componentOptions: {teaserImage: 'teaserImage'},
19
// Enterprise only: CSS class set as a wrapper around the result list
20
cssWrapper: 'li-result-columns'
21
}]
Copied!

Example: Taskboard (simple config)

1
dashboards: [{
2
handle: 'kanban-proofreading',
3
type: 'taskBoard',
4
pageTitle: 'Proofreading',
5
// This is the name of a metadataProperty of `type: 'li-task-v2'`
6
taskName: 'proofreading',
7
displayFilters: ['documentState', 'timeRange']
8
}]
Copied!

Example: Kanbanboard (full config)

1
dashboards: [{
2
handle: 'kanban-proofreading',
3
type: 'kanbanBoard',
4
pageTitle: 'Proofreading',
5
// Label used to describe the documents in this KanbanBoard
6
entityLabel: 'Article',
7
displayFilters: [],
8
// Base filters are applied to all columns
9
baseFilters: [{type: 'documentType', value: 'article'}],
10
// This is the name of the angular component to use in all columns
11
// (can also be defined for each columns separately)
12
componentName: 'liTaskCard',
13
// include all metadata properties in the search response data
14
fields: ['metadata.*'],
15
// Set the target when clicking on a card. Currently supported:
16
// - 'article' (default setting)
17
// - 'tasks'
18
openState: 'tasks',
19
showFooter: true,
20
columns: [{
21
handle: 'requested',
22
label: 'Needs Proofreading',
23
// Filter applied for this column on top of the `baseFilter`
24
columnFilter: [{type: 'metadata', key: 'proofreading.state', value: 'requested'}],
25
sort: [`metadata.proofreading.priority`, `metadata.proofreading.deadline`]
26
// The componentOptions are injected into the component `liTaskCard` (in this example)
27
componentOptions: {column: 'todo', taskName: 'proofreading'}
28
}, {
29
handle: 'in-progress',
30
label: 'In Progress',
31
columnFilter: [{type: 'metadata', key: 'proofreading.state', value: 'accepted'}],
32
sort: [`metadata.proofreading.priority`, `-metadata.proofreading.accepted.date`],
33
componentOptions: {column: 'doing', taskName: 'proofreading'}
34
}, {
35
handle: 'done',
36
label: 'Finished Proofreading',
37
columnFilter: [{type: 'metadata', key: 'proofreading.state', value: 'completed'}],
38
sort: [`-metadata.proofreading.completed.date`],
39
componentOptions: {column: 'done', taskName: 'proofreading'}
40
}]
41
}]
Copied!

startPage

Set custom startPage: {path: '/my-custom-path'}} to set the path used to render on login or when switching projects.

Media Library

After linking the media library on the mainNavigation (see above), you can customize the default Media Library Dashboards:
  • mediaLibrary.dashboard.displayFilters: an array of Display Filters for the Dashboard accessible via the Main Navigation
  • mediaLibrary.editorSelection.displayFilters: an array of Display Filters for the Dashboard accessible via the Media Button in the Document Editing Toolbar
Then there are 2 configs to define the behavior when Images are inserted into a Document from the Media Library:
  • mediaLibrary.altTextPrefilling: {metadataPropertyName: ''}: a metadata property handle from which the alt attribute on an image tag is filled.
  • mediaLibrary.componentDirectivesPrefilling: an array of mappings to prefill doc-editable directives with Media Library Entry Metadata
    1
    [
    2
    {metadataPropertyName: 'source', directiveName: 'source'},
    3
    {metadataPropertyName: 'caption', directiveName: 'caption'}
    4
    ]
    Copied!
    Text Formatting
The text formatting toolbar can be customized globally here. You can also overwrite this settings for each content type. Enable or disable the existing elements for text formatting:
1
textFormatting: {
2
bold: {enabled: true},
3
italic: {enabled: true},
4
superscript: {enabled: false},
5
subscript: {enabled: false},
6
singleQuotes: ['`', '`'],
7
quotes: ['"', '"'],
8
link: {enabled: true},
9
specialChars: {enabled: false}
10
}
Copied!
Extend the text formatting toolbar with custom configured elements. The elements will be shown after the default elements. Add this configuration to the textFormatting configuration above.
1
customElements: [{
2
label: 'blue color',
3
handle: 'bluecolor',
4
// the tag which is set around the selection
5
tagName: 'span',
6
// the icon which will be displayed. Only existing icons in the editor can be used.
7
icon: 'format-color-highlight',
8
// the attributes which are set on the tag
9
attributes: [{name: 'class', value: 'blue'}]
10
}]
Copied!
Add placeholder config to a custom elements. This enables the possibility for the user to add a value to the defined placeholder attribute. The existing value can be removed and after a change applied. This can be used when the user should have the possibility to add some information to a selection. The information can be used for example in the delivery.
1
customElements: [{
2
label: 'icon',
3
handle: 'customIcon',
4
tagName: 'span',
5
icon: 'format-color-highlight',
6
attributes: [{name: 'class', value: 'custom-icon'}],
7
// the placeholder attribute which will be filled with the inserted value
8
placeholder: {name: 'ld-placeholder'}
9
}]
Copied!
Last modified 9mo ago