Feature/lscache (#136)

* v14.0.0

* Use lscache to store content

* Fix missing refs

Author: dmitrizzle

examples/editor.js

@@ -1,5 +1,7 @@
 import React from "react"
+import lscache from 'lscache';
 
+import {EXAMPLE_VALUE} from "./constants"
 import {
   //
   // editor compoent itself
@@ -8,7 +10,6 @@ import {
   //
 } from "../src/index"
 import {TestPlugin} from "./plugin"
-import {EXAMPLE_VALUE} from "./constants"
 import //
 // picture component that you will need to pass as a prop in order to
 // render images within your documents; you can create your own Picture
@@ -66,11 +67,11 @@ export class Editor extends React.PureComponent {
           // in localStorage. In that case, an EXAMPLE_VALUE content is to be
           // loaded. However, once it's modified, the saved version will be
           // loaded every time. Note that
-          // localStorage.getItem("composer-content-state") is never NULL, even
+          // lscache.get("composer-content-state") is never NULL, even
           // for empty documents after first auto save, since even an empty
           // document has a structure that's stored in the LS.
           value={
-            localStorage.getItem("composer-content-state")
+            lscache.get("composer-content-state")
               ? null
               : EXAMPLE_VALUE
           }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roast-cms/french-press-editor",
-  "version": "13.2.1",
+  "version": "14.0.0",
   "description": "An offline-first rich text editor component.",
   "main": "dist/index.js",
   "repository": "https://github.com/roast-cms/french-press-editor.git",
@@ -70,6 +70,7 @@
     "localforage": "^1.7.1",
     "localforage-getitems": "^1.4.1",
     "lodash": "^4.17.4",
+    "lscache": "^1.3.0",
     "positions": "^1.6.1",
     "slate": "0.36.2",
     "slate-auto-replace-legacy": "^0.9.0",

src/utils/storage.js

@@ -1,3 +1,4 @@
+import lscache from "lscache"
 import throttle from "lodash/throttle"
 
 import {DEFAULT_EDITOR_STATE} from "../constants/defaults"
@@ -7,16 +8,15 @@ import {DEFAULT_EDITOR_STATE} from "../constants/defaults"
  * @module loadContent
  */
 export const loadContent = () => {
-  let local = localStorage.getItem("composer-content-state")
-  return local ? JSON.parse(local) : DEFAULT_EDITOR_STATE
+  return lscache.get("composer-content-state") || DEFAULT_EDITOR_STATE
 }
 
 /**
  * Loads stored text version of user's document from localStorage.
  * @module loadTextContent
  */
 export const loadTextContent = () => {
-  return localStorage.getItem("composer-content-text") || ""
+  return lscache.get("composer-content-text") || ""
 }
 //
 // functions that store content onto localStorage
@@ -27,8 +27,7 @@ export const loadTextContent = () => {
  * @param {Object} json
  */
 export const storeContentState = json => {
-  const contentState = JSON.stringify(json)
-  localStorage.setItem("composer-content-state", contentState)
+  lscache.set("composer-content-state", json)
 }
 
 /**
@@ -41,7 +40,7 @@ export const storeContentState = json => {
  */
 export const saveContent = throttle((document, state, callbackStatus) => {
   storeContentState(state.toJSON())
-  localStorage.setItem("composer-content-text", state.document.text)
+  lscache.set("composer-content-text", state.document.text)
   callbackStatus && callbackStatus("ok")
 }, 3000)
 

yarn.lock

@@ -5675,6 +5675,11 @@ lru-cache@^5.1.1:
   dependencies:
     yallist "^3.0.2"
 
+lscache@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/lscache/-/lscache-1.3.0.tgz#2221fd39f3393d2dfbc6ed2231beb52e11e43396"
+  integrity sha512-0JwzMSSu3fd3m8QQVbqIxzXywkNLQvgdNehuEtZ66v7f89ybpkZX+WN45SkvChP4AqUPSpDPJKHsAqStOhHgUA==
+
 make-dir@^2.0.0, make-dir@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"