How to use the slate.Value.create function in slate

To help you get started, we’ve selected a few slate examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github ianstormtaylor / slate / packages / slate-react / src / utils / clone-fragment.js View on Github external
// COMPAT: In Chrome and Safari, if we don't add the `white-space` style
    // then leading and trailing spaces will be ignored. (2017/09/21)
    span.style.whiteSpace = 'pre'

    span.appendChild(attach)
    contents.appendChild(span)
    attach = span
  }

  attach.setAttribute(DATA_ATTRS.FRAGMENT, encoded)

  //  Creates value from only the selected blocks
  //  Then gets plaintext for clipboard with proper linebreaks for BLOCK elements
  //  Via Plain serializer
  const valFromSelection = Value.create({ document: fragment })
  const plainText = Plain.serialize(valFromSelection)

  // Add the phony content to a div element. This is needed to copy the
  // contents into the html clipboard register.
  const div = window.document.createElement('div')
  div.appendChild(contents)

  // For browsers supporting it, we set the clipboard registers manually,
  // since the result is more predictable.
  // COMPAT: IE supports the setData method, but only in restricted sense.
  // IE doesn't support arbitrary MIME types or common ones like 'text/plain';
  // it only accepts "Text" (which gets mapped to 'text/plain') and "Url"
  // (mapped to 'text/url-list'); so, we should only enter block if !IS_IE
  if (event.clipboardData && event.clipboardData.setData && !IS_IE) {
    event.preventDefault()
    event.clipboardData.setData(TEXT, plainText)
github Foundry376 / Mailspring / app / src / components / composer-editor / composer-editor.tsx View on Github external
onCopy = (event, editor: Editor, next: () => void) => {
    const sel = document.getSelection();

    // copying within an uneditable region of the composer (eg: quoted HTML email)
    // is handled by the browser on it's own. We only need to copy the Slate
    // value if the selection is in the editable region.
    const entirelyWithinUneditable =
      sel.anchorNode.parentElement.closest('.uneditable') &&
      sel.focusNode.parentElement.closest('.uneditable');
    if (entirelyWithinUneditable) return;

    event.preventDefault();

    const range = (editor.value.selection as any) as Range;
    const fragment = editor.value.document.getFragmentAtRange(range);
    const value = Value.create({ document: fragment });
    const text = convertToPlainText(value);
    if (text) {
      event.clipboardData.setData('text/html', convertToHTML(value));
      event.clipboardData.setData('text/plain', text);
    } else {
      // Don't blow away the current contents of the user's clipboard if the
      // current editor selection has no text at all.
    }

    // Allow slate to attach it's own data, which it can use to paste nicely
    // if the paste target is the editor.
    next();
  };
github haiwen / seahub / frontend / src / view-file-cdoc.js View on Github external
constructor(props) {
    super(props);
    this.collabServer = seafileCollabServer ? seafileCollabServer : null;
    this.richEditorUtils = new RichEditorUtils(editorUtilities, this);
    this.state = {
      value: Value.create({}),
      collabUsers: userInfo ?
        [{ user: userInfo, is_editing: false }] : [],
      fileInfo: {
        repoID: repoID,
        name: fileName,
        path: filePath,
        lastModifier: '',
        id: '',
      },
      isShowTypeChooser: false,
      isSaving: false,
      contentChanged: false,
      showShareLinkDialog: false,
      isShowHistory: false,
    };
github react-page / react-page / packages / plugins / content / slate / src / hooks.js View on Github external
export const merge = (states: Object[]): Object => {
  const nodes = map(path(['editorState', 'document', 'nodes']), states)
  const mergedNodes = reduce(
    (a: List, b: List) => a.concat(b),
    head(nodes),
    tail(nodes)
  )
  const mergedDocument = Document.create({ nodes: mergedNodes })
  const mergedEditorState = Value.create({ document: mergedDocument })

  return { editorState: mergedEditorState }
}
github haiwen / seahub / frontend / src / draft.js View on Github external
range = range.moveAnchorTo(nextText.key, 0);
      }
    }
    if (focusInline && focus.offset == focusText.text.length) {
      const block = document.getClosestBlock(focus.key);
      const nextText = block.getNextText(focus.key);
      if (nextText) {
        range = range.moveFocusTo(nextText.key, 0); 
      }
    }
    let fragment = document.getFragmentAtRange(range);
    let nodes = this.removeNullNode(fragment.nodes);
    let newFragment = Document.create({
      nodes: nodes
    });
    let newValue = Value.create({
      document: newFragment
    });
    this.quote = serialize(newValue.toJSON());
    let blockPath = document.createSelection(range).anchor.path.slice(0, 1);
    let node = document.getNode(blockPath);
    this.newIndex = node.data.get('new_index');
    this.oldIndex = node.data.get('old_index');
  }
github netlify / netlify-cms / packages / netlify-cms-widget-markdown / src / MarkdownControl / VisualEditor.js View on Github external
const createSlateValue = (rawValue, { voidCodeBlock }) => {
  const rawDoc = rawValue && markdownToSlate(rawValue, { voidCodeBlock });
  const rawDocHasNodes = !isEmpty(get(rawDoc, 'nodes'));
  const document = Document.fromJSON(rawDocHasNodes ? rawDoc : createEmptyRawDoc());
  return Value.create({ document });
};
github react-page / react-page / packages / plugins / content / slate / src / hooks.tsx View on Github external
? nodes.toArray().map(node => {
        const splittedDocument = Document.create({ nodes: List([node]) });
        const splittedEditorState = Value.create({
          document: splittedDocument,
        });

        return { editorState: splittedEditorState };
      })
    : [];
github webiny / webiny-js / packages / webiny-ui / src / RichTextEditorRichTextEditor / Editor.js View on Github external
constructor(props) {
        super();

        this.state = {
            modified: false,
            showMenu: false,
            value: props.value ? Value.fromJSON(props.value) : Value.create(initialValue),
            readOnly: !props.onChange,
            activePlugin: null
        };

        this.plugins = getPlugins("form-editor-rich-editor")
            .filter(pl => !props.exclude.includes(pl.name))
            .map(pl => pl.slate);
    }
github Canner / canner-slate-editor / docs / slate-icons / initialValue.js View on Github external
import {Value} from 'slate';
import {State} from 'markup-it';
import markdown from 'markup-it/lib/markdown';
import readme from 'slateIcons/README.md';

const mdParser = State.create(markdown);
const document = mdParser.deserializeToDocument(readme)

export default Value.create({document});