-
Notifications
You must be signed in to change notification settings - Fork 3
/
readonly-bare.html
76 lines (76 loc) · 39 KB
/
readonly-bare.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /><link rel="preload" href="/_next/static/css/6940058859857f2b.css" as="style"/><link rel="stylesheet" href="/_next/static/css/6940058859857f2b.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script defer="" src="/_next/static/chunks/5452.0e27716840c1d002.js"></script><script defer="" src="/_next/static/chunks/3858.c74783cb709bb2f5.js"></script><script src="/_next/static/chunks/webpack-f23dfb714e1a3e7e.js" defer=""></script><script src="/_next/static/chunks/framework-0657cf0bbe2d78c2.js" defer=""></script><script src="/_next/static/chunks/main-5b3c0682a5671237.js" defer=""></script><script src="/_next/static/chunks/pages/_app-a95d5abdf14c65ba.js" defer=""></script><script src="/_next/static/chunks/4879-022062c38ef2fcf9.js" defer=""></script><script src="/_next/static/chunks/1255-fdaa5395cc55e86f.js" defer=""></script><script src="/_next/static/chunks/5849-1cfebe30034ba573.js" defer=""></script><script src="/_next/static/chunks/664-ae64e7af221b50d2.js" defer=""></script><script src="/_next/static/chunks/2754-ea68e72e157fd488.js" defer=""></script><script src="/_next/static/chunks/8650-a562e079ec9ba02e.js" defer=""></script><script src="/_next/static/chunks/9000-e5909e152999abea.js" defer=""></script><script src="/_next/static/chunks/9148-93e6660f9cc48f09.js" defer=""></script><script src="/_next/static/chunks/pages/readonly-bare-e4544c2ec38424c1.js" defer=""></script><script src="/_next/static/FqKz2diUNQs7h8Byk9HBF/_buildManifest.js" defer=""></script><script src="/_next/static/FqKz2diUNQs7h8Byk9HBF/_ssgManifest.js" defer=""></script><style data-styled="" data-styled-version="5.3.6"></style><style data-emotion="css-global o6gwfi">html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box;-webkit-text-size-adjust:100%;}*,*::before,*::after{box-sizing:inherit;}strong,b{font-weight:700;}body{margin:0;color:rgba(0, 0, 0, 0.87);font-family:"Roboto","Helvetica","Arial",sans-serif;font-weight:400;font-size:1rem;line-height:1.5;letter-spacing:0.00938em;background-color:#fff;}@media print{body{background-color:#fff;}}body::backdrop{background-color:#fff;}</style><style data-emotion="css "></style><style data-href="https://fonts.googleapis.com/css?family=Open+Sans">@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-stretch:normal;src:url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVQ.woff) format('woff')}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-stretch:100%;src:url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4taVQUwaEQbjB_mQ.woff) format('woff');unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-stretch:100%;src:url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4kaVQUwaEQbjB_mQ.woff) format('woff');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-stretch:100%;src:url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4saVQUwaEQbjB_mQ.woff) format('woff');unicode-range:U+1F00-1FFF}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-stretch:100%;src:url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4jaVQUwaEQbjB_mQ.woff) format('woff');unicode-range:U+0370-03FF}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-stretch:100%;src:url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4iaVQUwaEQbjB_mQ.woff) format('woff');unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-stretch:100%;src:url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4vaVQUwaEQbjB_mQ.woff) format('woff');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-stretch:100%;src:url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4uaVQUwaEQbjB_mQ.woff) format('woff');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-stretch:100%;src:url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVQUwaEQbjA.woff) format('woff');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}</style></head><body><div id="__next"><div><div class="react-page-row"><div class="react-page-cell react-page-cell-sm-12 react-page-cell-xs-12 react-page-cell-leaf"><div class="react-page-cell-inner react-page-cell-inner-leaf slate"><div style="display:flex;flex-direction:column;height:100%"><div style="position:relative;outline:none;white-space:pre-wrap;overflow-wrap:break-word"><h2 style="text-align:center">Next Level Content Editing</h2><h1 style="text-align:center">ReactPage</h1></div></div></div></div></div><div class="react-page-row"><div class="react-page-cell react-page-cell-sm-12 react-page-cell-xs-12 react-page-cell-leaf"><div class="react-page-cell-inner react-page-cell-inner-leaf slate"><div style="display:flex;flex-direction:column;height:100%"><div style="position:relative;outline:none;white-space:pre-wrap;overflow-wrap:break-word"><p><strong>ReactPage</strong> is a next level content editor for react.</p><p>It enables <strong><em>webmasters and content editors </em></strong>to create the content they want with the <code style="white-space:pre-wrap"><Components /></code> you provide as a developer.</p></div></div></div></div></div><div class="react-page-row"><div class="react-page-cell react-page-cell-sm-12 react-page-cell-xs-12"><div style="padding:0" class="react-page-cell-inner"><div style="display:flex;flex-direction:column;height:100%"><div class="react-page-plugins-layout-background" style="background:linear-gradient(180deg, rgba(72, 39, 39, 0.75), rgba(0, 0, 0, 0.6224999999999999)), url('') center / cover no-repeat fixed"><div class="react-page-plugins-layout-background__backstretch" style="background-image:linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0))"></div><div><div class="react-page-row"><div class="react-page-cell react-page-cell-sm-6 react-page-cell-xs-12 react-page-cell-leaf"><div class="react-page-cell-inner react-page-cell-inner-leaf"><div style="display:flex;flex-direction:column;height:100%"><div><div class="react-page-plugins-content-image-placeholder"></div></div></div></div></div><div class="react-page-cell react-page-cell-sm-6 react-page-cell-xs-12 react-page-cell-leaf"><div class="react-page-cell-inner react-page-cell-inner-leaf slate"><div style="display:flex;flex-direction:column;height:100%"><div style="position:relative;outline:none;white-space:pre-wrap;overflow-wrap:break-word"><h2>Batteries included - Key features</h2><ul><li>powerful and customizable <strong>RichText Editor (</strong><em>powered by </em><a href="https://github.com/vazco/uniforms"><em></em></a><em></em><a href="https://github.com/ianstormtaylor/slate/"><em>Slate</em></a>)</li><li>12-column grid responsive grid layout</li><li>Drag & Drop cells</li><li>Undo & Redo, copy and hotkey support</li><li>Multi-Language support</li><li>Add any custom Components you like</li></ul></div></div></div></div></div></div></div></div></div></div></div><div class="react-page-row"><div class="react-page-cell react-page-cell-sm-12 react-page-cell-xs-12 react-page-cell-leaf"><div class="react-page-cell-inner react-page-cell-inner-leaf slate"><div style="display:flex;flex-direction:column;height:100%"><div style="position:relative;outline:none;white-space:pre-wrap;overflow-wrap:break-word"><h2>It's just a react component!</h2></div></div></div></div></div><div class="react-page-row"><div class="react-page-cell react-page-cell-sm-6 react-page-cell-xs-12"><div class="react-page-row react-page-row-has-floating-children"><div class="react-page-cell react-page-cell-sm-4 react-page-cell-xs-12 react-page-cell-inline-right react-page-cell-leaf"><div class="react-page-cell-inner react-page-cell-inner-leaf"><div style="display:flex;flex-direction:column;height:100%"><div><img class="react-page-plugins-content-image" src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg"/></div></div></div></div><div class="react-page-cell react-page-cell-sm-12 react-page-cell-xs-12 react-page-cell-has-inline-neighbour react-page-cell-leaf"><div class="react-page-cell-inner react-page-cell-inner-leaf slate"><div><div style="position:relative;outline:none;white-space:pre-wrap;overflow-wrap:break-word"><p><strong>ReactPage</strong> has a simple API - it's basically just like a form field and can be included in any project. </p><p>Pass it's current <code style="white-space:pre-wrap">value</code> that you might read from your datastore and update the value when <code style="white-space:pre-wrap">onChange</code> is called. <strong>It's that simple.</strong></p><p>Set <code style="white-space:pre-wrap">readOnly={true}</code> whenever you want to display content without editing capabilities. <strong>ReactPage</strong> will only load what is really required for displaying thanks to code splitting. This results in a <strong>small bundle size.</strong> </p></div></div></div></div></div></div><div class="react-page-cell react-page-cell-sm-6 react-page-cell-xs-12 react-page-cell-leaf"><div class="react-page-cell-inner react-page-cell-inner-leaf"><div style="display:flex;flex-direction:column;height:100%"><!--$?--><template id="B:0"></template><!--/$--></div></div></div></div><div class="react-page-row"><div class="react-page-cell react-page-cell-sm-12 react-page-cell-xs-12"><div class="react-page-row"><div class="react-page-cell react-page-cell-sm-4 react-page-cell-xs-12 react-page-cell-leaf"><div class="react-page-cell-inner react-page-cell-inner-leaf"><div style="display:flex;flex-direction:column;height:100%"><div><div class="react-page-plugins-content-image-placeholder"></div></div></div></div></div><div class="react-page-cell react-page-cell-sm-8 react-page-cell-xs-12 react-page-cell-leaf"><div class="react-page-cell-inner react-page-cell-inner-leaf slate"><div style="display:flex;flex-direction:column;height:100%"><div style="position:relative;outline:none;white-space:pre-wrap;overflow-wrap:break-word"><h2>Add anything you want</h2><p>Anything can displayed inside a cell of this editor! You can add text, images, videos and any custom Component you want by creating custom <code style="white-space:pre-wrap">CellPlugins.</code></p><p>Provide your webmasters a "recommended products" section for your E-Commerce blog.
Show a contact form directly inside your content.
Embed Tweets and newest posts from Social media.</p><p>Anything is possible with a simple, yet powerful API. </p><p>You provide a Component and some metadata about your new <code style="white-space:pre-wrap">CellPlugin </code>and you are done. If you additionaly provide a schema of the data of this <code style="white-space:pre-wrap">CellPlugin, </code>we will <strong>automatically create a form</strong> for you (<em>powered by </em><a href="https://github.com/vazco/uniforms"><em>Uniforms</em></a>).</p></div></div></div></div></div><div class="react-page-row"><div class="react-page-cell react-page-cell-sm-6 react-page-cell-xs-12 react-page-cell-leaf"><div class="react-page-cell-inner react-page-cell-inner-leaf slate"><div style="display:flex;flex-direction:column;height:100%"><div style="position:relative;outline:none;white-space:pre-wrap;overflow-wrap:break-word"><h2>Powerful Rich Text editing</h2><p>We provide a powerful richtext plugin built upon <a href="https://github.com/vazco/uniforms"></a><a href="https://github.com/ianstormtaylor/slate/">Slate</a>. It works out-of-the-box, but is fully customizable. You can customize how everything is rendered by providing custom component for headlines, paragraphs, links and so-on and you can add create your own custom plugins to bring in <span color="green" style="color:green">color</span>, add custom links or custom paragraph styles.</p><h2></h2></div></div></div></div><div class="react-page-cell react-page-cell-sm-6 react-page-cell-xs-12 react-page-cell-leaf"><div class="react-page-cell-inner react-page-cell-inner-leaf slate"><div style="display:flex;flex-direction:column;height:100%"><div style="position:relative;outline:none;white-space:pre-wrap;overflow-wrap:break-word"><p><em></em></p><p style="text-align:center"><em>You can customize the rich text editor anyway you like.
You can even add formula editing capabilities:</em></p><p style="text-align:center"><span style="position:relative"><span contenteditable="false"><!--$!--><template data-dgst="DYNAMIC_SERVER_USAGE"></template><!--/$--></span><span style="opacity:0;position:absolute;left:0;top:0">f(x) = x^2 </span></span></p><p></p></div></div></div></div></div></div></div><div class="react-page-row"><div class="react-page-cell react-page-cell-sm-6 react-page-cell-xs-12"><div class="react-page-row"><div class="react-page-cell react-page-cell-sm-12 react-page-cell-xs-12 react-page-cell-leaf"><div class="react-page-cell-inner react-page-cell-inner-leaf slate"><div style="display:flex;flex-direction:column;height:100%"><div style="position:relative;outline:none;white-space:pre-wrap;overflow-wrap:break-word"><h2>Embraces Typescript</h2><ol><li>ReactPage is written in modern typescript and enables developer that include ReactPage into their project with typesafety and peace of mind. Thanks to generics, you can give any CellPlugin the data type that you need.</li></ol></div></div></div></div></div><div class="react-page-row"><div class="react-page-cell react-page-cell-sm-12 react-page-cell-xs-12 react-page-cell-leaf"><div class="react-page-cell-inner react-page-cell-inner-leaf"><div style="display:flex;flex-direction:column;height:100%"><div><h4>A Sample Twitter plugin</h4><div></div></div></div></div></div></div></div><div class="react-page-cell react-page-cell-sm-6 react-page-cell-xs-12 react-page-cell-leaf"><div class="react-page-cell-inner react-page-cell-inner-leaf"><div style="display:flex;flex-direction:column;height:100%"><!--$?--><template id="B:1"></template><!--/$--></div></div></div></div><div class="react-page-row"><div class="react-page-cell react-page-cell-sm-8 react-page-cell-xs-12 react-page-cell-leaf"><div class="react-page-cell-inner react-page-cell-inner-leaf slate"><div style="display:flex;flex-direction:column;height:100%"><div style="position:relative;outline:none;white-space:pre-wrap;overflow-wrap:break-word"><h2>Server Side Rendering out of the box</h2><p><strong>ReactPage </strong>is built with performance in mind. It can be used for <strong>server side rendering (SSR)</strong>, which makes it not only a great tool for editing, but also for displaying. It's battle tested in nextjs, this example itself is created using nextjs and static page generation.</p><p>We try <strong>minimize bundle size</strong> as much as possible. Any UI solely used for editing is not loaded when in readOnly mode. </p></div></div></div></div><div class="react-page-cell react-page-cell-sm-4 react-page-cell-xs-12"><div class="react-page-row"><div class="react-page-cell react-page-cell-sm-12 react-page-cell-xs-12 react-page-cell-leaf"><div class="react-page-cell-inner react-page-cell-inner-leaf slate"><div style="display:flex;flex-direction:column;height:100%"><div style="position:relative;outline:none;white-space:pre-wrap;overflow-wrap:break-word"><p style="text-align:center"><em></em></p><p><em>ReactPage works in any SSR setup like
Next.js or Gatsby</em></p></div></div></div></div></div><div class="react-page-row"><div class="react-page-cell react-page-cell-sm-4 react-page-cell-xs-12 react-page-cell-leaf"><div class="react-page-cell-inner react-page-cell-inner-leaf"><div style="display:flex;flex-direction:column;height:100%"><div><img class="react-page-plugins-content-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/Nextjs-logo.svg/800px-Nextjs-logo.svg.png"/></div></div></div></div><div class="react-page-cell react-page-cell-sm-3 react-page-cell-xs-12 react-page-cell-leaf"><div class="react-page-cell-inner react-page-cell-inner-leaf"><div style="display:flex;flex-direction:column;height:100%"><div class="react-page-plugins-content-spacer"><div style="height:24px"></div></div></div></div></div><div class="react-page-cell react-page-cell-sm-5 react-page-cell-xs-12 react-page-cell-leaf"><div class="react-page-cell-inner react-page-cell-inner-leaf"><div style="display:flex;flex-direction:column;height:100%"><div><img class="react-page-plugins-content-image" src="https://www.gatsbyjs.cn/Gatsby-Logo.svg"/></div></div></div></div></div></div></div></div></div><div hidden id="S:0"><pre style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-tsx" style="color:#9cdcfe;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre-wrap;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span><span>
</span></span><span><span></span><span class="token" style="color:#c586c0">import</span><span> </span><span class="token" style="color:#9cdcfe">Editor</span><span> </span><span class="token" style="color:#c586c0">from</span><span> </span><span class="token" style="color:#ce9178">'@react-page/editor'</span><span>
</span></span><span>
</span><span><span></span><span class="token" style="color:#6a9955">// use ReactPage for editing Content</span><span>
</span></span><span><span></span><span class="token" style="color:#808080"><</span><span class="token" style="color:#4ec9b0">Editor</span><span class="token" style="color:#569cd6">
</span></span><span><span class="token" style="color:#569cd6"> </span><span class="token" style="color:#9cdcfe">cellPlugins</span><span class="token script language-javascript script-punctuation" style="color:#569cd6">=</span><span class="token script language-javascript" style="color:#808080">{</span><span class="token script language-javascript" style="color:#569cd6">yourCellPlugins</span><span class="token script language-javascript" style="color:#808080">}</span><span class="token" style="color:#569cd6">
</span></span><span><span class="token" style="color:#569cd6"> </span><span class="token" style="color:#9cdcfe">value</span><span class="token script language-javascript script-punctuation" style="color:#569cd6">=</span><span class="token script language-javascript" style="color:#808080">{</span><span class="token script language-javascript" style="color:#569cd6">theCurrentValue</span><span class="token script language-javascript" style="color:#808080">}</span><span class="token" style="color:#569cd6">
</span></span><span><span class="token" style="color:#569cd6"> </span><span class="token" style="color:#9cdcfe">onChange</span><span class="token script language-javascript script-punctuation" style="color:#569cd6">=</span><span class="token script language-javascript" style="color:#808080">{</span><span class="token script language-javascript" style="color:#569cd6">newValue </span><span class="token script language-javascript" style="color:#569cd6">=></span><span class="token script language-javascript" style="color:#569cd6"> </span><span class="token script language-javascript" style="color:#dcdcaa">saveTheValue</span><span class="token script language-javascript" style="color:#808080">(</span><span class="token script language-javascript" style="color:#569cd6">newValue</span><span class="token script language-javascript" style="color:#808080">)</span><span class="token script language-javascript" style="color:#808080">}</span><span class="token" style="color:#569cd6">
</span></span><span><span class="token" style="color:#569cd6"></span><span class="token" style="color:#808080">/></span><span>
</span></span><span>
</span><span><span></span><span class="token" style="color:#6a9955">// or just for displaying content</span><span>
</span></span><span><span></span><span class="token" style="color:#808080"><</span><span class="token" style="color:#4ec9b0">Editor</span><span class="token" style="color:#569cd6">
</span></span><span><span class="token" style="color:#569cd6"> </span><span class="token" style="color:#9cdcfe">cellPlugins</span><span class="token script language-javascript script-punctuation" style="color:#569cd6">=</span><span class="token script language-javascript" style="color:#808080">{</span><span class="token script language-javascript" style="color:#569cd6">yourCellPlugins</span><span class="token script language-javascript" style="color:#808080">}</span><span class="token" style="color:#569cd6">
</span></span><span><span class="token" style="color:#569cd6"> </span><span class="token" style="color:#9cdcfe">value</span><span class="token script language-javascript script-punctuation" style="color:#569cd6">=</span><span class="token script language-javascript" style="color:#808080">{</span><span class="token script language-javascript" style="color:#569cd6">theCurrentValue</span><span class="token script language-javascript" style="color:#808080">}</span><span class="token" style="color:#569cd6">
</span></span><span><span class="token" style="color:#569cd6"> </span><span class="token" style="color:#9cdcfe">readOnly</span><span class="token script language-javascript script-punctuation" style="color:#569cd6">=</span><span class="token script language-javascript" style="color:#808080">{</span><span class="token script language-javascript" style="color:#569cd6">true</span><span class="token script language-javascript" style="color:#808080">}</span><span class="token" style="color:#569cd6">
</span></span><span><span class="token" style="color:#569cd6"></span><span class="token" style="color:#808080">/></span><span>
</span></span><span></span></code></pre></div><script>function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d)if(0===e)break;else e--;else"$"!==d&&"$?"!==d&&"$!"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data="$";a._reactRetry&&a._reactRetry()}};$RC("B:0","S:0")</script><div hidden id="S:1"><pre style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-tsx" style="color:#9cdcfe;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre-wrap;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span><span class="token" style="color:#c586c0">import</span><span> </span><span class="token" style="color:#569CD6">type</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span> </span><span class="token" style="color:#4ec9b0">CellPlugin</span><span> </span><span class="token" style="color:#d4d4d4">}</span><span> </span><span class="token" style="color:#c586c0">from</span><span> </span><span class="token" style="color:#ce9178">'@react-page/editor'</span><span class="token" style="color:#d4d4d4">;</span><span>
</span></span><span><span></span><span class="token" style="color:#c586c0">import</span><span> </span><span class="token" style="color:#9cdcfe">React</span><span> </span><span class="token" style="color:#c586c0">from</span><span> </span><span class="token" style="color:#ce9178">'react'</span><span class="token" style="color:#d4d4d4">;</span><span>
</span></span><span><span></span><span class="token" style="color:#c586c0">import</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span class="token"> </span><span class="token" style="color:#9cdcfe">Timeline</span><span class="token"> </span><span class="token" style="color:#d4d4d4">}</span><span> </span><span class="token" style="color:#c586c0">from</span><span> </span><span class="token" style="color:#ce9178">'react-twitter-widgets'</span><span class="token" style="color:#d4d4d4">;</span><span>
</span></span><span>
</span><span><span></span><span class="token" style="color:#569CD6">type</span><span> </span><span class="token" style="color:#4ec9b0">Data</span><span> </span><span class="token" style="color:#d4d4d4">=</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span></span><span><span> screenName</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#ce9178">string</span><span class="token" style="color:#d4d4d4">;</span><span>
</span></span><span><span> height</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#ce9178">number</span><span class="token" style="color:#d4d4d4">;</span><span>
</span></span><span><span> title</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#ce9178">string</span><span class="token" style="color:#d4d4d4">;</span><span>
</span></span><span><span></span><span class="token" style="color:#d4d4d4">}</span><span class="token" style="color:#d4d4d4">;</span><span>
</span></span><span><span></span><span class="token" style="color:#6a9955">// you can pass the shape of the data as the generic type argument</span><span>
</span></span><span><span></span><span class="token" style="color:#569CD6">const</span><span> customContentPluginTwitter</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#4ec9b0">CellPlugin</span><span class="token" style="color:#d4d4d4"><</span><span class="token" style="color:#4ec9b0">Data</span><span class="token" style="color:#d4d4d4">></span><span> </span><span class="token" style="color:#d4d4d4">=</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span></span><span><span> </span><span class="token function-variable" style="color:#dcdcaa">Renderer</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#d4d4d4">{</span><span> data </span><span class="token" style="color:#d4d4d4">}</span><span class="token" style="color:#d4d4d4">)</span><span> </span><span class="token" style="color:#569CD6">=></span><span> </span><span class="token" style="color:#d4d4d4">(</span><span>
</span></span><span><span> </span><span class="token" style="color:#808080"><</span><span class="token" style="color:#569cd6">div</span><span class="token" style="color:#808080">></span><span class="token plain-text">
</span></span><span><span class="token plain-text"> </span><span class="token" style="color:#808080"><</span><span class="token" style="color:#569cd6">h4</span><span class="token" style="color:#808080">></span><span class="token" style="color:#d4d4d4">{</span><span>data</span><span class="token" style="color:#d4d4d4">.</span><span class="token property-access">title</span><span class="token" style="color:#d4d4d4">}</span><span class="token" style="color:#808080"></</span><span class="token" style="color:#569cd6">h4</span><span class="token" style="color:#808080">></span><span class="token plain-text">
</span></span><span><span class="token plain-text"> </span><span class="token" style="color:#808080"><</span><span class="token" style="color:#4ec9b0">Timeline</span><span class="token" style="color:#569cd6">
</span></span><span><span class="token" style="color:#569cd6"> </span><span class="token" style="color:#9cdcfe">dataSource</span><span class="token script language-javascript script-punctuation" style="color:#569cd6">=</span><span class="token script language-javascript" style="color:#808080">{</span><span class="token script language-javascript" style="color:#808080">{</span><span class="token script language-javascript" style="color:#569cd6">
</span></span><span><span class="token script language-javascript" style="color:#569cd6"> sourceType</span><span class="token script language-javascript" style="color:#d4d4d4">:</span><span class="token script language-javascript" style="color:#569cd6"> </span><span class="token script language-javascript" style="color:#ce9178">'profile'</span><span class="token script language-javascript" style="color:#808080">,</span><span class="token script language-javascript" style="color:#569cd6">
</span></span><span><span class="token script language-javascript" style="color:#569cd6"> </span><span class="token script language-javascript" style="color:#6a9955">// data has already the right type!</span><span class="token script language-javascript" style="color:#569cd6">
</span></span><span><span class="token script language-javascript" style="color:#569cd6"> screenName</span><span class="token script language-javascript" style="color:#d4d4d4">:</span><span class="token script language-javascript" style="color:#569cd6"> data</span><span class="token script language-javascript" style="color:#808080">.</span><span class="token script language-javascript property-access" style="color:#569cd6">screenName</span><span class="token script language-javascript" style="color:#808080">,</span><span class="token script language-javascript" style="color:#569cd6">
</span></span><span><span class="token script language-javascript" style="color:#569cd6"> </span><span class="token script language-javascript" style="color:#808080">}</span><span class="token script language-javascript" style="color:#808080">}</span><span class="token" style="color:#569cd6">
</span></span><span><span class="token" style="color:#569cd6"> </span><span class="token" style="color:#9cdcfe">options</span><span class="token script language-javascript script-punctuation" style="color:#569cd6">=</span><span class="token script language-javascript" style="color:#808080">{</span><span class="token script language-javascript" style="color:#808080">{</span><span class="token script language-javascript" style="color:#569cd6">
</span></span><span><span class="token script language-javascript" style="color:#569cd6"> height</span><span class="token script language-javascript" style="color:#d4d4d4">:</span><span class="token script language-javascript" style="color:#569cd6"> data</span><span class="token script language-javascript" style="color:#808080">.</span><span class="token script language-javascript property-access" style="color:#569cd6">height</span><span class="token script language-javascript" style="color:#569cd6"> </span><span class="token script language-javascript" style="color:#d4d4d4">||</span><span class="token script language-javascript" style="color:#569cd6"> </span><span class="token script language-javascript" style="color:#b5cea8">600</span><span class="token script language-javascript" style="color:#808080">,</span><span class="token script language-javascript" style="color:#569cd6">
</span></span><span><span class="token script language-javascript" style="color:#569cd6"> </span><span class="token script language-javascript" style="color:#808080">}</span><span class="token script language-javascript" style="color:#808080">}</span><span class="token" style="color:#569cd6">
</span></span><span><span class="token" style="color:#569cd6"> </span><span class="token" style="color:#808080">/></span><span class="token plain-text">
</span></span><span><span class="token plain-text"> </span><span class="token" style="color:#808080"></</span><span class="token" style="color:#569cd6">div</span><span class="token" style="color:#808080">></span><span>
</span></span><span><span> </span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">,</span><span>
</span></span><span><span> id</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#ce9178">'twitter-timeline'</span><span class="token" style="color:#d4d4d4">,</span><span>
</span></span><span><span> title</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#ce9178">'Twitter timeline'</span><span class="token" style="color:#d4d4d4">,</span><span>
</span></span><span><span> description</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#ce9178">'A twitter timeline'</span><span class="token" style="color:#d4d4d4">,</span><span>
</span></span><span><span> version</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">1</span><span class="token" style="color:#d4d4d4">,</span><span>
</span></span><span><span> controls</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span></span><span><span> type</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#ce9178">'autoform'</span><span class="token" style="color:#d4d4d4">,</span><span>
</span></span><span><span> schema</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span></span><span><span> </span><span class="token" style="color:#6a9955">// this JSONschema is type checked against the generic type argument</span><span>
</span></span><span><span> </span><span class="token" style="color:#6a9955">// the autocompletion of your IDE helps to create this schema</span><span>
</span></span><span><span> properties</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span></span><span><span> title</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span></span><span><span> type</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#ce9178">'string'</span><span class="token" style="color:#d4d4d4">,</span><span>
</span></span><span><span> </span><span class="token" style="color:#c586c0">default</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#ce9178">'A Sample Twitter plugin'</span><span class="token" style="color:#d4d4d4">,</span><span>
</span></span><span><span> </span><span class="token" style="color:#d4d4d4">}</span><span class="token" style="color:#d4d4d4">,</span><span>
</span></span><span><span> screenName</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span></span><span><span> type</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#ce9178">'string'</span><span class="token" style="color:#d4d4d4">,</span><span>
</span></span><span><span> </span><span class="token" style="color:#c586c0">default</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#ce9178">'typescript'</span><span class="token" style="color:#d4d4d4">,</span><span>
</span></span><span><span> </span><span class="token" style="color:#d4d4d4">}</span><span class="token" style="color:#d4d4d4">,</span><span>
</span></span><span><span> height</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span></span><span><span> type</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#ce9178">'number'</span><span class="token" style="color:#d4d4d4">,</span><span>
</span></span><span><span> </span><span class="token" style="color:#c586c0">default</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">600</span><span class="token" style="color:#d4d4d4">,</span><span>
</span></span><span><span> </span><span class="token" style="color:#d4d4d4">}</span><span class="token" style="color:#d4d4d4">,</span><span>
</span></span><span><span> </span><span class="token" style="color:#d4d4d4">}</span><span class="token" style="color:#d4d4d4">,</span><span>
</span></span><span><span> required</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#d4d4d4">[</span><span class="token" style="color:#ce9178">'screenName'</span><span class="token" style="color:#d4d4d4">]</span><span class="token" style="color:#d4d4d4">,</span><span>
</span></span><span><span> </span><span class="token" style="color:#d4d4d4">}</span><span class="token" style="color:#d4d4d4">,</span><span>
</span></span><span><span> </span><span class="token" style="color:#d4d4d4">}</span><span class="token" style="color:#d4d4d4">,</span><span>
</span></span><span><span></span><span class="token" style="color:#d4d4d4">}</span><span class="token" style="color:#d4d4d4">;</span><span>
</span></span><span>
</span><span><span></span><span class="token" style="color:#c586c0">export</span><span> </span><span class="token" style="color:#c586c0">default</span><span> customContentPluginTwitter</span><span class="token" style="color:#d4d4d4">;</span><span>
</span></span><span></span></code></pre></div><script>$RC("B:1","S:1")</script><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/readonly-bare","query":{},"buildId":"FqKz2diUNQs7h8Byk9HBF","nextExport":true,"autoExport":true,"isFallback":false,"dynamicIds":[13858],"scriptLoader":[]}</script></body></html>