Document Editing Features

All of the following options concern the editor environment configuration files, so for example config/environments/all.js in the boilerplate editor. We list all available config options here where necessary with links to other pages.

Toolbar

Some of the editing features visible in the top toolbar when you are editing a document can be configured.

E.g config/environments/all.js

app: {
  useSplitPane: true,
  useSelectionMode: true,
  useHistoryMode: true,
  undoRedoButtonsAreEnabled: true
}

Insert Panel

Advanced Component Groups

Availability of advanced features such as component search and collapsable component groups.

The search is automatically activated if there are more than 8 components.

Properties Panel

Transform Component

Visibility of the “Transform Component” select menu can be configured.

app: {
  editor: {
    propertiesPanel: {
      transformComponentEnabled: true
    }
  }
}

Images

There are several configuration options concerning images.

Image service

See here

Image cropping

See here

Sizes

app: {
  imageMinWidth: 300,
  imageMinHeight: 100
}

The image min width and height control if an image can be cropped or not.

Text Editing

See here

Embeds

By default, the Livingdocs core supports embeds of type Iframe:

iframe default ratio

{
  embeds: {
    iframe: {
      defaultRatio: 55
    }
  }
}

Iframes in Livingdocs use a special CSS trick to always be rendered in a given aspect ratio and scale automatically to the given width. In this way an iframe out of Livingdocs is never cut off at the sides. The default ratio of 55 is about a 16:9 aspect ratio. Use this formula to calculate the correct value for your custom default aspect ratio: (width / height) * 100. This setting only sets the default ratio, a user is given an interface to change the aspect ratio inside of the Livingdocs editor.

Timeout

{
  http: {
    timeout: 10000
  }
}

Allows you to configure after how much time a timeout should happen in calls from the editor to the server. 10 seconds by default. In milliseconds.

Third-party services

Iframely

{
  iframely: {
    apiKey: '***',
    apiUrl: 'https://iframe.ly/api/iframely'
  }
}

Iframely is used for 2 things:

• validating links that you enter in the text (see text editing)
• in combination with doc-link to prefill component from metadata

Settings for Iframely

When you have your own Iframely account, you should disable this setting (red arrow) to prevent issues with link external link validation in Livingdocs.

Spellcheck

See here

Document History

{
  app: {
    useHistoryRestore: true
  }
}

The useHistoryRestore option enables / disables the restore functionality in the document history, i.e. the ability to restore the opened document to an older revision.

Diff View

app: {
  history: {
    diffUserColors: [
      ['#B39CD0', '#FBEAFF'],
      ['#F9F871', '#F6F2CB'],
      ['#FF9671', '#FFE6D6'],
      ['#D65DB1', '#EAADD4'],
      ['#00C9A7', '#C7FCEC'],
      ['#FFC75F', '#FFEDCB'],
      ['#008F7A', '#55C6AE'],
      ['#0089BA', '#5FBEF2'],
      ['#C34A36', '#D99586'],
      ['#FF6F91', '#FFE3EB']
    ],
    pageSize: 100
  },
}

The diffUserColors is an array with colors for the users in the diff view. You can set two colors for a user. The colors are always picked from beginning and given to a user in the diff view. The pageSize is the size of how many revisions are shown in the UI.

Links

See here

Keyboard Shortcuts

{
  keyboardShortcuts: {
    backspace: 'prevent backspace',
    escape: 'esc',
    enter: 'enter',
    up: 'focus previous component',
    down: 'focus next component',
    '⌘+up, ⌃+up': 'move component up',
    '⌘+down, ⌃+down': 'move component down',
    '⌘+z, ⌃+z': 'undo',
    '⌘+y, ⌘+shift+z, ⌃+y, ⌃+shift+z': 'redo'
  }
}

The keyboard shortcuts allow you to customize which keys you want to use for common actions in Livingdocs. The actions (values) are fixed. You can define on which keys you want to execute the actions

Multi Select and Multi Text Select

Selecting multiple components at once allows editors to delete a bulk of components. Editors can select multiple components by dragging from outside of the component view.

The selection of text across multiple components by dragging inside of a text component is enabled by default but can be disabled in the editable settings:

editable: {
  multiEditablesTextSelection: false,
}

Document Copy

{
  app: {
    copy: {
      isEnabled: true
    }
  }
}

If the copy feature is enabled, it allows you to copy and transform documents.

Comments

Comments are a great way for editors to communicate about a text. To enable it, add the following block to your editor config:

comments: {
  isEnabled: true,
  defaultForDocumentType: {
    article: true,
    page: false
  }
}

The defaultForDocumentType section allows you to separately turn comments off for articles and pages.

It’s also possible to turn on/off Comments for a specific Content Type.

The notification feature needs to be enabled if the mentioned users should get a notification. Notification feature

Filter Sets

Filter Sets allow you to define bookmarks on combinations of filters such as “Last hour” and “Published” as a bookmark “Recently published”. To enable the feature, add the following block to your editor config:

filterSets: {
  isEnabled: true
}

All users will be able to see and choose filter sets. Only admins and project admins will be able to add and edit filter sets.

Pin components

Pinning of components enables a pin icon next to a component card in the sidebar. When clicked the component is pinned according to the rules:

• if it is alone in a container it can not be moved, deleted nor can anything be moved or inserted before or after it (perfect for a fixed article header)
• if it is next to other components, it can not be moved nor deleted, but other components can be moved or inserted around it

pinComponents: {
  isEnabled: true
}

Pinning is triggered by the position property on the component. You can also pin components over the defaultContent by setting the position to fixed in the JSON:

defaultContent: [
  {
    component: "article-container",
    containers: {
      header: [
        {
          component: "head",
          position: "fixed"
        }
      ],
      main: [
        { component: "image" }
      ]
    }
  }
]

The UI allows users to unpin or pin a component. If you want to enforce pinning just disable the UI (pinComponents) and set the position to fixed programatically (e.g. by the default content).