Pressing Enter in the Editor does not apply the effect of the Bold tool on the new line.

[simonssspirit]

Pressing Enter in the Editor does not apply the effect of the Bold tool on the new line.

For example:

1- have an empty editor with the Bold (B) editor tool selected. 2- type in a line of text in the editor (this is shown as bold as I expect) 3 - hit 'Enter' 4 - type in another line of text in the editor

Results: The text on the second line is not bold.

[nstoychev]

Related to this discussion - https://discuss.prosemirror.net/t/preserve-styles-after-newline/625/12

[simonssspirit]

reported again in 1482420 for the FontName.

[nstoychev]

Here is how it can be handled:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  Editor,
  EditorTools
} from '@progress/kendo-react-editor';

import {
  buildKeymap,
  keymap,
  setBlockType,
  buildListKeymap,
  chainCommands,
  EditorState,
  EditorView,
  Transaction
} from '@progress/kendo-editor-common';

const {
  Bold,
  Italic,
  Underline,
  Undo,
  Redo,
  Indent,
  Outdent,
  AlignCenter,
  UnorderedList,
  OrderedList
} = EditorTools;

const App = () => {
  const onMount = (event: any) => {
    const { viewProps } = event;
    const state = viewProps.state;
    const { schema, doc } = state;

    const plugins = [
      keymap({
        Enter: (
          state: EditorState,
          dispatch: (tr: Transaction) => void,
          view: EditorView
        ) => {
          const blockType = state.selection.$head.parent;
          const marks = state.selection.$head.marks() || [];
          const result = chainCommands(buildListKeymap(schema).Enter, buildKeymap(schema).Enter)(state, dispatch);
          if (result && blockType) {
            setBlockType(blockType.type, blockType.attrs)(view.state, tr => {
              marks.forEach(m => { tr.addStoredMark(m); });
              dispatch(tr);
            });
          }
          return result;
        }
      }),
      ...viewProps.state.plugins
    ];

    return new EditorView(
      { mount: event.dom },
      {
        ...event.viewProps,
        state: EditorState.create({ doc, plugins })
      }
    );
  };

  return (
    <Editor
      onMount={onMount}
      contentStyle={{ height: 700 }}
      tools={[
        [Bold, Italic, Underline],
        [Undo, Redo],
        [Indent, Outdent, AlignCenter],
        [UnorderedList, OrderedList]
      ]}
    />
  );
};

ReactDOM.render(<App />, document.querySelector('my-app'));

[simonssspirit]

reported again in 1555831

[morpheis91]

Any way to bump this? My developer tried the solution above and we get an error RangeError: Duplicate use of selection JSON ID gapcursor

Update: seems to be something that happens in prosemirror quite often

[nstoychev]

@morpheis91 - It is not clear that all Editor's users (developers) will like this functionality to be built-in. That's why it is not implemented in the Editor yet.

In the code snippet above, we are using '@progress/kendo-editor-common' package, which contains all the prose-mirror packages/dependencies. Also '@progress/kendo-editor-common' package is a dependency of the Editor. Please make sure that you use the same '@progress/kendo-editor-common' package version in your app and do not install it twice.

Installing some of the prose-mirror packages twice, will result in a similar error that you got.

• https://discuss.prosemirror.net/t/duplicate-use-of-selection-json-id-cell-error/2071
• https://github.com/telerik/kendo-react/issues/881

Dealing with the Editor's dependencies is tricky at the moment and that is something that we plan to improve.

[morpheis91]

That makes sense, I have stumbled upon this prosemirror issue during my research in attempts to fix, will update here when we figure out why its still not working. We installed it once (the same versions from the example). I have a theory as to why its still not working, do you happen to know if the old kendo jquery wrappers and installing kendo core could affect this? Essentially, does kendo wrapper happen to include prose mirror thus potentially causing that id conflict?

[kdikov82]

@nstoychev Should we consider enabling this behavior by default with a property? We can also close the issue, since there is a custom solution that you have already shared.

[kdikov82]

I am closing the issue for consistency with Angular and due to the available workaround.