How to use slate-plain-serializer - 10 common examples

const createSlateValue = (content: object | string, options: ActionPayloadEditor.IOption[]): ActionPayloadEditor.SlateValue => {
    let objectContent: object | null = null
    if (typeof content === 'string') {
        // If string does not starts with { assume it's the old simple string based payload and user will have to manually load and re-save
        // Otherwise, treat as json as load the json representation of the editor which has fully saved entities and doesn't need manual reconstruction
        if (!content.startsWith('{')) {
            console.warn(`You created slate value from basic string: ${content} which may have had entities that are not detected. Please update the payload to fix and re-save.`)
            return Plain.deserialize(content)
        }

        objectContent = JSON.parse(content) as object
    }

    const updatedJson = ActionPayloadEditor.Utilities.updateOptionNames(objectContent || content, options)
    return Value.fromJSON(updatedJson)
}

it('check mark selected text', () => {
    let state = Plain.deserialize("some text").
    // selected 'text' in state
    transform().moveOffsetsTo('some '.length, 'some text'.length).apply();
    const wrapper = shallow( { state = newState }} />);
    wrapper.find('button').simulate('click');
    expect(Plain.serialize(state)).to.equal('some _text_');
  });

it('check disabled button', () => {
    let state = Plain.deserialize("some _text_\nnext line").
    // select all text
    transform().selectAll().apply();
    const wrapper = shallow( {}} />);
    expect(wrapper.find('button[disabled=true]')).to.have.length(1);
  });
});

it('check disabled button', () => {
    let state = Plain.deserialize("some ~~text~~\nnext line").
    // select all text
    transform().selectAll().apply();
    const wrapper = shallow( {}} />);
    expect(wrapper.find('button[disabled=true]')).to.have.length(1);
  });
});

// distinct
      } else if (modelPrefix.match(/(distinct\s(.+\b)?$)/i)) {
        typeaheadContext = 'context-distinct';
        suggestionGroups = this.getColumnSuggestions();

        // database()
      } else if (modelPrefix.match(/(database\(\"(\w+)\"\)\.(.+\b)?$)/i)) {
        typeaheadContext = 'context-database-table';
        const db = this.getDBFromDatabaseFunction(modelPrefix);
        console.log(db);
        suggestionGroups = this.getTableSuggestions(db);
        prefix = prefix.replace('.', '');

        // new
      } else if (normalizeQuery(Plain.serialize(this.state.value)).match(/^\s*\w*$/i)) {
        typeaheadContext = 'context-new';
        if (this.schema) {
          suggestionGroups = this.getInitialSuggestions();
        } else {
          this.fetchSchema();
          setTimeout(this.onTypeahead, 0);
          return;
        }

        // built-in
      } else if (prefix && !wrapperClasses.contains('argument') && !force) {
        // Use only last typed word as a prefix for searching
        if (modelPrefix.match(/\s$/i)) {
          prefix = '';
          return;
        }

static getDerivedStateFromProps(props: Object, state: Object) {
        if (!state.modified && !props.readOnly) {
            // Got new editor value through props.
            return {
                value: props.value ? Value.fromJSON(props.value) : Plain.deserialize("")
            };
        }

        return null;
    }

}
    }

    if (numBlock !== -1) {
      const text = editorState.texts.get(0).text;
      const nodes = editorState.document.nodes.asMutable();
      this.setDataToNode(nodes, numBlock, text);
      editorState = this.setNodesToState(editorState, nodes);
    }

    // Slate emits onChange not only when text changes,
    // but also when caret changes position or editor gains/loses focus.
    // Slate needs this because it's inner state essentially changes,
    // (cursor position, focused status, etc), but we need to emit only real changes in text value.
    const oldValue = Plain.serialize(this.state.editorState);
    const newValue = Plain.serialize(editorState);
    if (oldValue !== newValue) {
      this.props.onChange(newValue);
    }

    this.setState({ editorState });

    setTimeout(() => {
      autoScrollToTop();
      if (isSetFocus) {
        const editorState = setSelectionToState(this.state.editorState, selection);
        this.setState({ editorState });
      }
    }, 0);
  };

// 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)
    event.clipboardData.setData(FRAGMENT, encoded)

/** @jsx h */
/* eslint-disable react/jsx-key */

const Plain = require('slate-plain-serializer').default

const input = `
  This is editable plain text, just like a text area.
`
  .trim()
  .repeat(10)

module.exports.input = input

module.exports.default = function(string) {
  Plain.deserialize(string)
}

/** @jsx h */
/* eslint-disable react/jsx-key */

const Plain = require('slate-plain-serializer').default
const h = require('../../helpers/h')

module.exports.default = function(state) {
  Plain.serialize(state)
}

module.exports.input = (
  
    
      {Array.from(Array(10)).map(() => (
        
          
            
              This is editable <b>rich</b> text, <i>much</i> better than a
              textarea!