Editor Settings

editorSettings: {
  userMenu: [
    {
      label: 'What is new',
      data: {
        lastUpdate: '2020-06-16T13:19:38.560Z'
      },
      icon: 'plus',
      id: 'release_notes',
      group: 'string:required',
      // Use either 'href' (external link) or 'route' (internal link)
      href: 'https://github.com/livingdocsIO/livingdocs-release-notes',
      route: {
        name: 'app.state'
      }
    }
  ],
  mainNavigation: [
    {liItem: 'articles'},
    {liItem: 'pages'},
    { // custom document dashboard
      handle: 'authors',
      label: 'Authors',
      dashboard: 'authors-dashboard',
      icon: 'account'
    },
    { // custom task screen
      handle: 'review',
      label: 'Review',
      taskScreen: 'review',
      icon: 'clipboard-check'
    },
    { // custom task dashboard
      handle: 'proofreading',
      label: 'Proofreading',
      dashboard: 'kanban-proofreading',
      icon: 'clipboard-check'
    },
    {liItem: 'mediaLibrary'},
    {liItem: 'lists'},
    {liItem: 'menus'},
    {liItem: 'contentSetup'},
    { // external link
      handle: 'website',
      label: 'Livingdocs Website',
      href: 'https://www.livingdocs.io',
      icon: 'rocket',
      group: 'preferences' // Used for grouping before release-2022-03
    },
    {liItem: 'projectSettings'},
    {liItem: 'serverAdmin'}
  ],
  mainNavigationGroups: [
    {
      handle: 'documents',
      label: 'Documents',
      // items is an array of liItem or handle strings
      items: [
        'articles',
        'pages',
        'authors'
      ]
    },
    {
      handle: 'mediaLibrary',
      label: 'Media Library',
      items: ['mediaLibrary'] // Media library types are split, but remain in the same group
    },
    {
      handle: 'workflow',
      label: 'Workflow',
      items: ['review', 'proofreading'] // Using the handles of custom mainNavigation menu items
    },
    {
      handle: 'content-management',
      label: 'Content Management',
      secondary: true, // Group uses a grey background and is collapsed by default
      items: [
        'lists',
        'menus'
      ]
    },
    {
      // No label property makes the group non-collapsible, and appear like top-level items
      handle: 'website',
      secondary: true,
      items: ['website']
    },
    {
      handle: 'preferences',
      label: 'Settings', // Update the label name of the preferences group
      secondary: true,
      items: [
        'contentSetup',
        'projectSettings',
        'serverAdmin'
      ]
    }
  ],
  dashboards: [
    {
      handle: 'kanban-proofreading',
      type: 'taskBoard',
      pageTitle: 'Proofreading',
      taskName: 'proofreading',
      throttleTime: 2000, // ms
      displayFilters: ['documentState', 'timeRange']
    },
    {
      handle: 'authors-dashboard',
      type: 'dashboard',
      pageTitle: 'Author Management',
      entityLabel: 'Author',
      baseFilters: [
        {key: 'documentType', value: 'data-record'}
      ],
      displayFilters: ['documentState', 'timeRange'],
      sort: '-updated_at',
      fields: ['metadata.*'],
      componentName: 'bluewinDashboardListItem'
    }
  ],
  // you can define configured cards here, they can then be referenced
  // within a mediaType defining the card to be used for rendering in a dashboard
  dashboardCardConfigurations: [
    {
      handle: 'myImageCard',
      useCard: 'liMediaLibraryCard',
      options: {
        additionalInfo: [
          {
            metadataPropertyName: 'credit'
          }
        ]
      }
    },
    {
      handle: 'myVideoCard',
      useCard: 'liMediaLibraryCard',
      options: {
        additionalInfo: [
          {
            metadataPropertyName: 'credit'
          }
        ]
      }
    }
  ],
  taskScreens: [
    {
      handle: 'proofreading',
      pageTitle: 'Proofreading',
      task: 'proofreading',
      baseFilters: [{key: 'contentType', term: 'regular'}],
      displayFilters: ['timeRange', {metadataPropertyName: 'proofreading'}],
      // columns: [], // Used to replace the default columns
      additionalMetadataProperties: ['effort', 'importance'],
      search: {}
    }
  ],
  // The startPage config has no effect if a home screen is configured in the same project.
  startPage: {
    path: '/articles'
  },
  mediaLibrary: {
    showUi: true, // default true
    altTextPrefilling: [
      {
        metadataPropertyName: 'caption',
        onlyOnComponents: ['image']
      }
    ],
    componentDirectivesPrefilling: [
      {
        type: 'template',
        // Template placeholders support metadata string and number values
        // If a value is invalid/not present, it will continue with the next prefilling
        template: '{{ metadata.photographer }} / {{ metadata.credit }} ©️',
        directiveName: 'source'
      },
      {
        type: 'template',
        // acts as fallback if the first template wasn't able to extract values
        template: '{{ metadata.photographer }} ©️',
        directiveName: 'source'
      },
      {
        metadataPropertyName: 'caption',
        directiveName: 'caption' // Applies to all components with a caption directive
      }
    ]
  },

  documentLists: {
    card: {
      name: 'liDocumentListCard' // default, can be omitted
    },
    dashboard: {
      displayFilters: [],
      baseFilters: []
    }
  }

  // Note: the textFormatting config can be overwritten in a `contentType`
  textFormatting: {
    bold: true,
    italic: true,
    superscript: false,
    subscript: false,
    link: true,
    specialChars: true,
    quotes: ['„', '“']
    singleQuotes: ['‚', '‘']
    apostrophe: '’',
    locales: {
      de: {
        quotes: ['„', '“'],
        singleQuotes: ['‚', '‘']
      },
      en: {
        quotes: ['“', '”'],
        singleQuotes: ['‘', '’']
      }
    }
  }
}

app: {
  locale: 'de',
  availableLocales: ['de', 'en', 'fr', 'it']
}

editorSettings: {
  mainNavigation: [
    {liItem: 'articles'}
  ]
}

{
  liItem: 'articles',
  label: 'Articles',
  icon: 'file-document',
  scope: 'readArticles'
}

{
  label: 'My Custom Dashboard',
  dashboard: 'my-custom-dashboard',
  icon: 'clipboard-check',
  scope: 'publishArticles'
}

{
  handle: 'proofreading',
  taskScreen: 'proofreading',
  label: 'Proofreading',
  icon: 'clipboard-check'
}

{
  label: 'Livingdocs',
  href: 'https://livingdocs.io',
  icon: 'web'
}

editorSettings: {
  mainNavigation: [
    // ...
  ],
  mainNavigationGroups: [
    {
      // Simple group linking to liItem menu items
      handle: 'documents',
      label: 'Documents',
      items: [
        'articles',
        'pages',
        'authors'
      ]
    },
    {
      // The {liItem: 'mediaLibrary'} will be split into a separate dashboard for each media type
      handle: 'media',
      label: 'Media Library',
      items: ['mediaLibrary']
    },
    {
      // A group for custom workflow dashboards
      handle: 'workflow',
      label: 'Workflow',
      items: ['proofreading', 'review']
    },
    {
      // Top-level external link (no label)
      handle: 'website',
      secondary: true, // Grey background
      items: ['website']
    },
    {
      // Merge the admin and preferences groups, and change the label name
      handle: 'preferences',
      label: 'Settings',
      secondary: true,
      items: [
        'contentSetup',
        'projectSettings',
        'serverAdmin'
      ]
    }
  ]
}

dashboards: [
  {
    handle: 'gallery-dashboard',
    type: 'dashboard',
    pageTitle: 'Gallery Board',
    // Label used to describe the documents in this Dashboard
    entityLabel: 'Article',
    // Invisible base filters applied to every search (including the default result list)
    baseFilters: [{key: 'documentType', term: 'article'}],
    // Filters shown to the user below the search input
    displayFilters: ['documentState', 'timeRange'],
    sort: '-updated_at',
    // fields to be returned from the server (not all metadata fields are returned by default)
    fields: ['metadata.*'],
    // Enterprise only: This is the name of the vue component used in the result list
    componentName: 'liHeroCard',
    // Enterprise only: The componentOptions are injected into the component
    // `liHeroCard` (in this example)
    componentOptions: {teaserImage: 'teaserImage'},
    // Enterprise only: CSS class set as a wrapper around the result list
    cssWrapper: 'li-result-columns'
  }
]

dashboards: [
  {
    handle: 'kanban-proofreading',
    type: 'taskBoard',
    pageTitle: 'Proofreading',
    // This is the name of a metadataProperty of `type: 'li-task-v2'`
    taskName: 'proofreading',
    displayFilters: ['documentState', 'timeRange']
  }
]

dashboards: [
  {
    handle: 'kanban-proofreading',
    type: 'kanbanBoard',
    pageTitle: 'Proofreading',
    // Label used to describe the documents in this KanbanBoard
    entityLabel: 'Article',
    displayFilters: [],
    // Base filters are applied to all columns
    baseFilters: [{key: 'documentType', term: 'article'}],
    // This is the name of the angular component to use in all columns
    // (can also be defined for each columns separately)
    componentName: 'liTaskCard',
    // include all metadata properties in the search response data
    fields: ['metadata.*'],
    // Set the target when clicking on a card. Currently supported:
    // - 'article' (default setting)
    // - 'tasks'
    openState: 'tasks',
    showFooter: true,
    columns: [
      {
        handle: 'requested',
        label: 'Needs Proofreading',
        // Filter applied for this column on top of the `baseFilter`
        columnFilter: [
          {key: 'metadata.proofreading.state', term: 'requested'}
        ],
        sort: [`metadata.proofreading.priority`, `metadata.proofreading.deadline`],
        // The componentOptions are injected into the component `liTaskCard` (in this example)
        componentOptions: {column: 'todo', taskName: 'proofreading'}
      },
      {
        handle: 'in-progress',
        label: 'In Progress',
        columnFilter: [
          {key: 'metadata.proofreading.state', term: 'accepted'}
        ],
        sort: [`metadata.proofreading.priority`, `-metadata.proofreading.accepted.date`],
        componentOptions: {column: 'doing', taskName: 'proofreading'}
      },
      {
        handle: 'done',
        label: 'Finished Proofreading',
        columnFilter: [
          {key: 'metadata.proofreading.state', term: 'completed'}
        ],
        sort: [`-metadata.proofreading.completed.date`],
        componentOptions: {column: 'done', taskName: 'proofreading'}
      }
    ]
  }
]

dashboards: [
  {
    handle: 'example-table-dashboard',
    type: 'tableDashboard',
    pageTitle: 'Table Dashboard Title',
    baseFilters: [
      {key: 'documentType', term: 'article'}
    ],
    displayFilters: [
      'channels',
      'documentState',
      'contentType',
      'timeRange',
      'language',
      'category'
    ],
    sort: '-updated_at',
    columns: [
      {
        label: 'Title',

        minWidth: 100,  // minimum width in pixels

        growFactor: 1,  // share of the remaining space after
                        // minWidth of all columns has been allocated
                        // (works like flex-grow in CSS)

        priority: 1,    // If there is not enough space for all columns
                        // keep those with priority 1, then 2, etc.

        // Name of the Vue component used for this column
        componentName: 'liTableDashboardCellMain',

        // Custom options passed to the above component
        componentOptions: {
          image: {
            metadataPropertyName: 'teaserImage'
          },
          clampTitle: false,
          showContentType: true
        }
      },
      {
        label: 'Description',
        minWidth: 200,
        growFactor: 3,
        priority: 3,

        // Columns can also display a metadata property instead of using a custom component
        metadataPropertyName: 'description',

        // default false, if true, metadata property can be edited inline in the dashboard
        editable: true
      }
    ],

    // adds a Document Creation Flow to the dashboard (e.g. custom button, custom create modal, custom create function)
    documentCreationFlows: [
      {useDocumentCreationFlow: 'breakingNews'}
    ]
  }
]

componentOptions: {
  image: {
    // Name of metadata property to be used for thumbnail image
    metadataPropertyName: 'teaserImage'
  },
  // Clamp title to max 3 rows
  clampTitle: false,
  // Show content type tag
  showContentType: true,
  // Only works if no displayTitlePattern is configured on the contentType
  allowTitleEdit: true

}

{
  label: 'Published',
  minWidth: 200,
  growFactor: 0,
  priority: 2,
  componentName: 'liTableDashboardCellPublishState',
  componentOptions: {
    allowQuickPublish: true
  }
},

columns: [
  ...,
  {
    label: 'Tasks',
    editable: false,
    minWidth: 150,
    growFactor: 0,
    priority: 2,
    componentName: 'liTableDashboardCellTaskList',
    componentOptions: {
      tasks: ['proofreading'] // filter which tasks to show
    }
  }
]

columns: [
  ...,
  {
    label: 'Statistics',
    minWidth: 200,
    growFactor: 1,
    priority: 2,
    componentName: 'liTableDashboardCellStatistics',
    componentOptions: {
      characterCount: true,
      componentCount: [
        'p',
        'title',
        'image',
        'image-named-crops'
      ]
    }
  }
]

columns: [
  ...,
  {
    label: {en: 'Print', de: 'Druck'},
    minWidth: 50,
    growFactor: 0,
    priority: 2,
    componentName: 'liTableDashboardCellPrint'
  }
]

taskScreens: [
  {
    handle: 'proofreading',
    pageTitle: 'Proofreading',
    task: 'proofreading',
    baseFilters: [{key: 'contentType', term: 'regular'}],
    displayFilters: ['timeRange', {metadataPropertyName: 'proofreading'}],
    // columns: [], // Used to replace the default columns
    additionalMetadataProperties: ['effort', 'importance'], // Used to extend the default columns
    search: {}
  }
]

// projectConfig.editorSettings
homeScreen: {
  dashboards: [
    {
      // Handle of the dashboard to show
      useDashboard: 'articles',
      // Hides the dashboard search input field (optional, default: false)
      hideSearchInput: true,
      // Title to show over the dashboard (optional, default: dashboard.pageTitle)
      dashboardTitle: 'Recommended Articles',
      // Use a custom dashboard source (see dashboard sources documentation below)
      dashboardSourceHandle: 'recommendedArticlesSource'
    },
    {
      useDashboard: 'example-table-dashboard'
    }
  ],
  documentCreationFlows: [
    {
      // Handle of a Document Creation Flow
      useDocumentCreationFlow: 'articles'
    },
    {
      useDocumentCreationFlow: 'breakingNews',
      // Render as primary button
      primary: true
    }
  ]
}

// projectConfig.editorSettings
documentCreationFlows: [
  {
    handle: 'breakingNews',
    // register a createFunction with liServer.registerCreateFunction()
    // default createFunction handle: 'liDefaultCreationFunction'
    createFunction: 'breakingNews',
    createButtonLabel: 'Create Breaking News',

    // shows title and urgency field in the create modal
    // the config is the same as for metadata plugins
    paramsSchema: [
      {handle: 'title', type: 'li-text'},
      {handle: 'urgency', type: 'li-number'},
    ],

    // values passed to paramsSchema fields as initial value
    defaultParams: {
      urgency: 5
    },

    // additional info for your createFunction
    context: {
      projectType: 'flex',
      contentType: 'regular'
    }
  }
]

// projectConfig.editorSettings
documentCopyFlows: [
  {
    handle: 'copyWebToPrint',
    // register a copyFunction with liServer.registerCopyFunction()
    copyFunction: 'copyWebToPrint',
    copyButtonLabel: 'Copy to Print',
    copyDescription: 'Copy the current web article to a new print article',
    copyIcon: 'newspaper',

    sourceLabel: 'Original Web Article',
    targetLabel: 'Print Copy',

    // shows title and section field in the copy modal
    // the config is the same as for metadata plugins
    paramsSchema: [
      {handle: 'workingTitle', type: 'li-text'},
      {handle: 'section', type: 'li-text'},
    ],

    // values passed to paramsSchema fields as initial value
    defaultParams: {section: 'News'},

    // additional info for your copyFunction
    context: {}
  }
]

liServer.registerCopyFunction({
  handle: 'copyWebToPrint',
  async copy ({projectConfig, documentVersion, params, context}) {
    return {
      title: params.workingTitle,
      metadata: {
        ...documentVersion.metadata.toJSON(),
        section: params.section,
        platform: 'print'
      },
      // you can override the content if you like
      // The default behavior is that the content is copied as is
      content: document.content
    }
  }
})

// projectConfig.editorSettings
documentPrintFlows: [
  {
    handle: 'regularToPrint',
    // register a printFunction with liServer.registerPrintFunction()
    printFunction: 'webToPrintFunction',
    direction: 'web-to-print',
    printButtonLabel: {en: 'Make Short Format Print Version', de: 'Kurzformatigen Druckartikel Erstellen'},
    printDescription: 'Only text will be copied, and only some contextual metadata will be cleared',
    printIcon: 'format-align-justify',

    // additional info for your copyFunction
    context: {}
  }
]

liServer.registerPrintFunction({
  handle: 'webToPrintFunction',
  copy ({projectConfig, document, userId, context}) {
    return  {
      title: `Print version of: ${document.title}`,
      contentType: 'print',
      content: filterComponents(document.content, allowedComponents),
      metadata: filterMetadata(document.metadata.toJSON(), allowedMetadata)
    }
  }
})

// projectConfig.editorSettings
documentTransformFlows: [
  {
    handle: 'convertArticleToGallery',
    // register a transformFunction with liServer.registerTransformFunction()
    transformFunction: 'convertArticleToGallery',
    transformButtonLabel: 'Convert to gallery article',
    transformDescription: '...',
    transformIcon: 'image-area',

    // shows working title in the transform modal
    // the config is the same as for metadata plugins
    paramsSchema: [
      {handle: 'workingTitle', type: 'li-text'}
    ],

    // values passed to paramsSchema fields as initial value
    defaultParams: {},

    // additional info for your transformFunction
    context: {}
  }
]

liServer.registerTransformFunction({
  handle: 'convertArticleToGallery',
  async transform ({params, documentVersion, context}) {
    return {
      contentType: 'gallery',
      title: params.workingTitle || documentVersion.title,
      content: await transformToGalleryContent(documentVersion.content)
    }
  }
})

// projectConfig.editorSettings

dashboardCardConfigurations: [
  {
    handle: 'myImageCard',
    useCard: 'liMediaLibraryCard',
    options: {
      // will make the card show the credit information from the metadata of the mediaLibraryEntry
      additionalInfo: [
        {
          metadataPropertyName: 'credit'
        }
      ]
    }
  },
  {
    handle: 'myDocumentListCard',
    useCard: 'liDocumentListCard',
    options: {
      // the liDocumentListCard supports the rendering of an additional Vue component
      // inside. This component is configured here, it has to be registered with the vueComponentRegistry
      uiExtensionComponent: {
        name: 'liDocumentListCardExtensionRocket'
      }
    }
  }
]

mediaLibrary.altTextPrefilling: [
  {
    metadataPropertyName: 'title',
    onlyOnComponents: ['image']
  }
]

mediaLibrary.componentDirectivesPrefilling: [
  {
    type: 'template',
    template: '{{ metadata.photographer }} / {{ metadata.credit }} ©️',
    directiveName: 'source'
  },
  {
    type: 'template',
    template: '{{ metadata.photographer }} ©️', // Fallback if credit is not set
    directiveName: 'source'
  },
  {
    type: 'template',
    template: '{{ metadata.credit }} ©️', // Fallback if photographer is not set
    directiveName: 'source'
  },
  {
    metadataPropertyName: 'source',
    directiveName: 'image.source' // Component prefix
  },
  {
    metadataPropertyName: 'description',
    directiveName: 'caption' // Applies to all components with a caption directive
  }
]

mediaLibrary.componentDirectivesPrefilling: [
s

documentLists: {
  card: {
    // defaults to liDocumentListCard provided by Livingdocs
    // can be any card registered in the vueComponentRegistry or
    // a configured one from dashboardCardConfigurations
    name: 'myDocumentListCard'
  },
  dashboard: {
    useDashboard: 'myCustomDashboard'
    displayFilters: [],
    baseFilters: [
      {key: 'documentType', term: 'article'},
      {key: 'lastPublicationId', exists: true}
    ]
  }
}

inlineLinks: {
  dashboard: {
    useDashboard: 'myCustomDashboard'
    displayFilters: [],
    baseFilters: [
      {key: 'documentType', term: 'article'},
      {key: 'lastPublicationId', exists: true}
    ]
  }
}

textFormatting: {
  bold: true,
  italic: true,
  superscript: false,
  subscript: false,
  link: true,
  specialChars: false,
  quotes: ['„', '“'],
  singleQuotes: ['‚', '‘'],
  apostrophe: '’',
  locales: {...}
}

 customElements: [
  {
    label: 'blue color',
    handle: 'bluecolor',
    // if trim is set to true, whitespaces on the left and right of the selection are removed
    trim: true,
    // the tag which is set around the selection
    tagName: 'span',
    // the icon which will be displayed. Only existing icons in the editor can be used.
    icon: 'format-color-highlight',
    // the attributes which are set on the tag
    attributes: [{name: 'class', value: 'blue'}]
  }
]

textCount: {
  isEnabled: true,
  showEditableCount: true, // shows the chars of the selected doc-editable
  timeout: 200,
  lineCountFraction: 39.5 // required to calculate a line count based on character count
}

{
  "name": "aside",
  "label": "Aside",
  "excludeFromTextCount": true
}

{
  "name": "quote",
  "label": "Quote",
  "directives": {
    "text": {"excludeFromTextCount": true},
    "source": {"excludeFromTextCount": true}
  }
}