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

const [value, setValue] = useState(() => {
    const model = elementsToSlateValue(
      page.element.id,
      elements,
      componentsById,
    );
    // For SSR.
    KeyUtils.resetGenerator();
    return Value.fromJSON(model);
  });
  const stylesById = useMemo(() => arrayOfItemsWithIdToObject(styles), [

marks: []
        }
      ]
    };

    const valueAsSlate = slateTransformer.fromMarkdown(clauseMd);
    const clauseNodeJSON = valueAsSlate.toJSON().document.nodes[0];
    const newSlateValueAsJSON = JSON.parse(JSON.stringify(slateValue.toJSON()));

    const { nodes } = newSlateValueAsJSON.document;

    // add the clause node to the Slate dom at current position
    // Temporary fix to separate clauses, adding the new paragraph at
    // end of splice. Convert this all back to markdown
    nodes.splice((currentPosition + 1), 0, clauseNodeJSON, paragraphSpaceNodeJSON);
    const realNewMd = slateTransformer.toMarkdown(Value.fromJSON(newSlateValueAsJSON));

    // update contract on store with new slate and md values
    yield put(actions.documentEdited(Value.fromJSON(newSlateValueAsJSON), realNewMd));
    const grammar = templateObj.parserManager.getTemplatizedGrammar();


    // Temporary roundtrip and rebuild grammar
    const grammarRound = roundTrip(grammar);
    templateObj.parserManager.buildGrammar(grammarRound);

    const sampleText = templateObj.getMetadata().getSamples().default;
    const model = templateObj.getModelManager().getModels();
    const logic = templateObj.getScriptManager().getLogic();
    const clauseTemplateId = uuidv4(); // unique identifier for a clause template

    // add a new clause template to the store so user can edit template

test("create a LineHeight icon", () => {
  const initialValue = Value.fromJSON({
    document: {
      nodes: [
        {
          object: "block",
          type: "paragraph",
          nodes: [
            {
              object: "text",
              leaves: [
                {
                  text: "A line of text in a paragraph."
                }
              ]
            }
          ]
        }

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

class Versions extends React.Component {
  /**
   * Deserialize the initial editor value.
   *
   * @type {Object}
   */

  state = {
    value: Value.fromJSON(initialValue),
    versions: [],
    v: '',
  }

  /**
   * On mounting, save an initial version.
   */

  componentDidMount() {
    this.saveVersion()
  }

  /**
   * Store a reference to the `editor`.
   *
   * @param {Editor} editor

import React from 'react'
import ReactDOM from 'react-dom'
import initialValue from './value'
import { Value } from 'slate'
import { Editor } from 'slate-react'

class Example extends React.Component {
  plugins = [
    StickyInlines({ bannedTypes: ["banned", "no-sticky-boundary-link", "cant-be-empty-link", "doesnt-stick-on-delete-link"] }),
    StickyInlines({ allowedTypes: ["no-sticky-boundary-link"], hasStickyBoundaries: false }),
    StickyInlines({ allowedTypes: ["cant-be-empty-link"], canBeEmpty: false }),
    StickyInlines({ allowedTypes: ["doesnt-stick-on-delete-link"], stickOnDelete: false })
  ];

  state = {
    value: Value.fromJSON(initialValue)
  };

  onChange = ({ value }) => {
    this.setState({ value })
  }

  renderNode = (props) => {
    switch (props.node.type) {
      case "link": {
        const className = props.isSelected ? "focused" : ""
        return <a href="/">{props.children}</a>
      }
      case "no-sticky-boundary-link": {
        const className = props.isSelected ? "focused" : ""
        return <a href="/">{props.children}</a>
      }

value = getValue(defaultObject);
    }

    if (typeof value === "string") {
        return value;
    }

    let editorPlugins = getPlugins("i18n-value-rich-text-editor")
        .map(item => item.plugin.editor)
        .filter(Boolean);

    if (Array.isArray(props.editorPlugins)) {
        editorPlugins = [...editorPlugins, ...props.editorPlugins];
    }

    return ;
}

//Now we need to determine if the response was from indexedDB or an API call:
    if (fetchFile.loadLocal || storageProvider === 'google' || storageProvider === 'ipfs') {
      let decryptedContent;
      if(storageProvider === 'google') {
        decryptedContent = await JSON.parse(decryptContent(fetchFile, { privateKey: thisKey }))
      } else {
        decryptedContent = await JSON.parse(
          decryptContent(JSON.parse(fetchFile.data.content), {
            privateKey: thisKey
          })
        );
      }
      
      setGlobal(
        {
          content: Value.fromJSON(decryptedContent.content),
          title: decryptedContent.title,
          tags: decryptedContent.tags,
          idToLoad: decryptedContent.id,
          singleDocIsPublic: decryptedContent.singleDocIsPublic, //adding this...
          docLoaded: true,
          readOnly: decryptedContent.readOnly, //NOTE: adding this, to setState of readOnly from getFile...
          rtc: decryptedContent.rtc || false,
          sharedWith: decryptedContent.sharedWith,
          teamDoc: decryptedContent.teamDoc,
          compressed: decryptedContent.compressed || false,
          spacing: decryptedContent.spacing,
          lastUpdate: decryptedContent.lastUpdate,
          jsonContent: true,
          versions: decryptedContent.versions || [],
          loading: false
        })

const getDefaultState = () => ({
  title: '',
  content: Value.fromJSON({
    document: {
      nodes: [
        {
          object: 'block',
          type: 'paragraph', 
        },
      ],
    },
  }),
  storyId: undefined,
  lastSave: Date.now(),
  lastEdit: undefined,
  changesSaved: true,
  linkPrompt: undefined,
  link: '',
  tags: [],

export const createInitialState = () => ({
  editorState: Value.fromJSON(
    {
      document: {
        nodes: [
          {
            object: 'block',
            type: P,
            nodes: [
              {
                object: 'text',
                leaves: [
                  {
                    text: ''
                  }
                ]
              }
            ]

import { compose } from "recompose";
import { Value } from "slate";
import { Editor } from "slate-react";
import { Auth } from "../auth";
import { LinkifyPlugin } from "../lib/slate-plugins/linkifyPlugin";

const linkifyPlugin = LinkifyPlugin();

const plugins = [linkifyPlugin];

export class MetaDataEditorPresentational extends React.Component {
  public state = {
    isSavePending: false,
    didSaveJustSuccesfullyOccur: false,
    value: this.props.valueAsJSON
      ? Value.fromJSON(this.props.valueAsJSON)
      : Value.fromJSON({
          document: {
            nodes: [
              {
                object: "block",
                type: "paragraph",
                nodes: [
                  {
                    object: "text",
                    leaves: [
                      {
                        text: "",
                      },
                    ],
                  },
                ],