How to use the slate-plain-serializer.deserialize function in slate-plain-serializer

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);
  });
});

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;
    }

it('clears to the end of the line', () => {
    const change = Plain.deserialize('foo').change();
    const event = new window.KeyboardEvent('keydown', {
      key: 'k',
      ctrlKey: true,
    });
    handler(event, change);
    expect(Plain.serialize(change.value)).toEqual('');
  });

componentWillReceiveProps(props) {
    log('componentWillReceiveProps')
    if (this.props.selected && !props.selected) {
      this.props.dispatch({ type: CARD_TEXT_CHANGED,
        id: this.props.cardId,
        text: Plain.serialize(this.state.value) })
      maybeInlineFile(this.props.dispatch, this.props.cardId, this.props.text)
    } else if (!props.selected) {
      this.setState({ value: Plain.deserialize(props.text) })
    }
  }

import Plain from 'slate-plain-serializer'
import { Editor } from 'slate-react'

import React from 'react'
import CollapseOnEscape from './collapse-on-escape'
import SoftBreak from './soft-break'
import WordCount from './word-count'

/**
 * Deserialize the initial editor value.
 *
 * @type {Object}
 */

const initialValue = Plain.deserialize(`This example shows how you can extend Slate with plugins! It uses four fairly simple plugins, but you can use any plugins you want, or write your own!
The first is a simple plugin to collapse the selection whenever the escape key is pressed. Try selecting some text and pressing escape.
The second is another simple plugin that inserts a "soft" break when enter is pressed instead of creating a new block. Try pressing enter!
The third is an example of using the plugin.render property to create a higher-order-component.`)

/**
 * Plugins.
 */

const plugins = [CollapseOnEscape(), SoftBreak(), WordCount()]

/**
 * The plugins example.
 *
 * @type {Component}
 */

isConfirmEditModalOpen: false,
    isConfirmDuplicateActionModalOpen: false,
    validationWarnings: [],
    isPayloadFocused: false,
    isPayloadMissing: true,
    entityWarning: false,
    newOrEditedAction: null,
    selectedActionTypeOptionKey: actionTypeOptions[0].key,
    availableExpectedEntityTags: [],
    conditionalTags: [],
    expectedEntityTags: [],
    requiredEntityTagsFromPayload: [],
    requiredEntityTags: [],
    negativeEntityTags: [],
    slateValuesMap: {
        [TEXT_SLOT]: Plain.deserialize('')
    },
    secondarySlateValuesMap: {},
    isTerminal: true
}

class ActionCreatorEditor extends React.Component {
    state = initialState;

    constructor(props: Props) {
        super(props)
        this.state = this.initProps()
    }

    initProps(): ComponentState {
        const { entities, botInfo } = this.props
        const apiOptions = botInfo.callbacks.map(convertCallbackToOption)

menuPosition: IPosition | null
    value: SlateValue
    preBuiltEditorValues: SlateValue[],
    builtInTypeFilter: string | null
}

const initialState: Readonly = {
    isSelectionOverlappingOtherEntities: false,
    isDeleteButtonVisible: false,
    isPreBuiltExpandoOpen: true,
    menuPosition: {
        top: 0,
        left: 0,
        bottom: 0
    },
    value: Plain.deserialize(''),
    preBuiltEditorValues: [{}],
    builtInTypeFilter: null
}

const disallowedOperations = ['insert_text', 'remove_text']
const externalChangeOperations = ['insert_node', 'remove_node']

/**
 * The higher level goal behind this component is for consumers to think of it like a normal controlled <input value="{value}">
 * However, instead of editing a simple string of text we are editing an extractorResponse object. Then it becomes easy to understand the
 * abstractions and encapsulation.  Example: for normal <input> the user can change cursor position and selection, but only when characters are changed,
 * does the onChange get called.  For the ExtractorResponse allows certain operations to change and only exposes the changes externally
 *
 * The other important concept is the translation of state from the external domain to internal domain.  Externally the consumers know extractorResponses / entities
 * however internally it stores as generic options list and a Slate.js value object.
 */