feat: native components (#789)

* wip: component viewer

* feat: get component status from component viewer

* feat: native components

* fix: remove unused property

* fix: remove unused func

* chore(deps): snjs 2.29.0

* fix: import location

* feat: native components

* fix: remove unused func

* feat: component viewer (#781)

* wip: component viewer

* feat: get component status from component viewer

* fix: remove unused property

* chore(deps): snjs 2.29.0

* fix: import location

* chore: use cp instead of webpack copy

* fix: types

* chore: misc

public/components/org.standardnotes.code-editor/dist/main.css

@@ -0,0 +1,3 @@
+body,html{font-family:sans-serif;height:100%;margin:0;font-size:var(--sn-stylekit-base-font-size)}.wrapper{display:flex;flex-direction:column;position:relative;height:100%;overflow-x:hidden}.CodeMirror{background-color:var(--sn-stylekit-editor-background-color) !important;color:var(--sn-stylekit-editor-foreground-color) !important;border:0 !important;font-family:var(--sn-stylekit-monospace-font);-webkit-overflow-scrolling:touch;font-size:calc(var(--sn-stylekit-font-size-editor) - 0.1rem);flex:1 1 auto;width:100%;height:100%;resize:none}.CodeMirror .cm-header{color:var(--sn-stylekit-editor-foreground-color)}.CodeMirror .cm-formatting-header,.CodeMirror .cm-formatting-strong,.CodeMirror .cm-formatting-em{opacity:.2}.CodeMirror .cm-variable,.CodeMirror .cm-variable-1,.CodeMirror .cm-variable-2,.CodeMirror .cm-variable-3,.CodeMirror .cm-string-2{color:var(--sn-stylekit-info-color) !important}.CodeMirror .cm-variable.CodeMirror-selectedtext,.CodeMirror .cm-variable-1.CodeMirror-selectedtext,.CodeMirror .cm-variable-2.CodeMirror-selectedtext,.CodeMirror .cm-variable-3.CodeMirror-selectedtext,.CodeMirror .cm-string-2.CodeMirror-selectedtext{color:var(--sn-stylekit-info-contrast-color) !important;background:transparent}.CodeMirror .cm-qualifier,.CodeMirror .cm-meta{color:var(--sn-stylekit-neutral-color) !important}.CodeMirror .cm-error{color:var(--sn-stylekit-danger-color) !important}.CodeMirror .cm-def,.CodeMirror .cm-atom{color:var(--sn-stylekit-success-color)}.CodeMirror .CodeMirror-linenumber{color:var(--sn-stylekit-neutral-color) !important;opacity:.5}.CodeMirror-cursor{border-color:var(--sn-stylekit-info-color) !important}.CodeMirror-cursors{z-index:10 !important}.CodeMirror-selected{background:var(--sn-stylekit-info-color) !important}.CodeMirror-gutters{background-color:var(--sn-stylekit-background-color) !important;color:var(--sn-stylekit-editor-foreground-color) !important;border-color:var(--sn-stylekit-border-color) !important}.cm-header-1{font-size:150%}.cm-header-2{font-size:130%}.cm-header-3{font-size:120%}.cm-header-4{font-size:110%}.cm-header-5{font-size:100%}.cm-header-6{font-size:90%}.CodeMirror .cm-quote{color:var(--sn-stylekit-foreground-color);opacity:.6}
+
+/*# sourceMappingURL=main.css.map*/

public/components/org.standardnotes.code-editor/dist/main.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["webpack://sn-code-editor/./src/main.scss"],"names":[],"mappings":"AAAA,UACE,uBACA,YACA,SACA,4CAGF,SACE,aACA,sBACA,kBACA,YAGA,kBAGF,YACE,uEACA,4DACA,oBACA,8CACA,iCAGA,6DAEA,cACA,WACA,YACA,YAEA,uBACE,iDAIF,kGACE,WAGF,mIACE,+CAEA,2PACE,wDACA,uBAIJ,+CACE,kDAGF,sBACE,iDAOF,yCACE,uCAGF,mCACE,kDACA,WAIJ,mBACE,sDAGF,oBACE,sBAGF,qBACE,oDAGF,oBACE,gEACA,4DACA,wDAGF,4BACA,4BACA,4BACA,4BACA,4BACA,2BAEA,sBACE,0CACA,W","file":"main.css","sourcesContent":["body, html {\n  font-family: sans-serif;\n  height: 100%;\n  margin: 0;\n  font-size: var(--sn-stylekit-base-font-size);\n}\n\n.wrapper {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  height: 100%;\n\n  // Fixes unnecessary horizontal scrolling on Windows\n  overflow-x: hidden;\n}\n\n.CodeMirror {\n  background-color: var(--sn-stylekit-editor-background-color) !important;\n  color: var(--sn-stylekit-editor-foreground-color) !important;\n  border: 0 !important;\n  font-family: var(--sn-stylekit-monospace-font);\n  -webkit-overflow-scrolling: touch;\n\n  // code doesn't look good at normal text size, better to be a bit smaller\n  font-size: calc(var(--sn-stylekit-font-size-editor) - 0.1rem);\n\n  flex: 1 1 auto;\n  width: 100%;\n  height: 100%;\n  resize: none;\n\n  .cm-header {\n    color: var(--sn-stylekit-editor-foreground-color);\n  }\n\n  // Faded Markdown syntax\n  .cm-formatting-header, .cm-formatting-strong, .cm-formatting-em {\n    opacity: 0.2;\n  }\n\n  .cm-variable, .cm-variable-1, .cm-variable-2, .cm-variable-3, .cm-string-2 {\n    color: var(--sn-stylekit-info-color) !important;\n\n    &.CodeMirror-selectedtext {\n      color: var(--sn-stylekit-info-contrast-color) !important;\n      background: transparent;\n    }\n  }\n\n  .cm-qualifier, .cm-meta {\n    color: var(--sn-stylekit-neutral-color) !important;\n  }\n\n  .cm-error {\n    color: var(--sn-stylekit-danger-color) !important;\n  }\n\n  .cm-property {\n\n  }\n\n  .cm-def, .cm-atom {\n    color: var(--sn-stylekit-success-color);\n  }\n\n  .CodeMirror-linenumber {\n    color: var(--sn-stylekit-neutral-color) !important;\n    opacity: 0.5;\n  }\n}\n\n.CodeMirror-cursor {\n  border-color: var(--sn-stylekit-info-color) !important;\n}\n\n.CodeMirror-cursors {\n  z-index: 10 !important; // In Markdown mode, cursor is hidden behind code blocks\n}\n\n.CodeMirror-selected {\n  background: var(--sn-stylekit-info-color) !important;\n}\n\n.CodeMirror-gutters {\n  background-color: var(--sn-stylekit-background-color) !important;\n  color: var(--sn-stylekit-editor-foreground-color) !important;\n  border-color: var(--sn-stylekit-border-color) !important;\n}\n\n.cm-header-1 { font-size: 150%; }\n.cm-header-2 { font-size: 130%; }\n.cm-header-3 { font-size: 120%; }\n.cm-header-4 { font-size: 110%; }\n.cm-header-5 { font-size: 100%; }\n.cm-header-6 { font-size: 90%; }\n\n.CodeMirror .cm-quote {\n  color: var(--sn-stylekit-foreground-color);\n  opacity: 0.6;\n}\n"],"sourceRoot":""}

public/components/org.standardnotes.code-editor/dist/main.js

@@ -0,0 +1,2 @@
+document.addEventListener("DOMContentLoaded",(function(){const e=CodeMirror.modeInfo.reduce((function(e,t){return e[t.mode]?e[t.mode].push(t):e[t.mode]=[t],e}),{}),t=CodeMirror.modeInfo.reduce((function(e,t){return e[t.name]={mode:t.mode,mime:t.mime},e}),{}),n=Object.keys(t);let o,a,i,d,m,r,c,s=!1,u=!0;function l(){if(a){let e=a;o.saveItemWithPresave(e,(()=>{d=r.getValue(),e.content.text=d,e.clientData=i,e.content.preview_plain=null,e.content.preview_html=null}))}}function f(o){if(!o)return;const a=function(n){const o=function(e){return e?{name:e.name,mode:e.mode,mime:e.mime}:null},a=/.+\.([^.]+)$/.exec(n),i=/\//.test(n);if(a)return o(CodeMirror.findModeByExtension(a[1]));if(i)return o(CodeMirror.findModeByMIME(i[1]));if(t[n])return{name:n,mode:t[n].mode,mime:t[n].mime};if(e[n]){const t=e[n][0];return{name:t.name,mode:t.mode,mime:t.mime}}return{name:n,mode:n,mime:n}}(o);a?(r.setOption("mode",a.mime),CodeMirror.autoLoadMode(r,a.mode),i&&(i.mode=a.name),document.getElementById("language-select").selectedIndex=n.indexOf(a.name)):console.error("Could not find a mode corresponding to "+o)}function g(e){const t=document.getElementById("toggle-vim-mode-button"),n="vim"===e?"Disable":"Enable",o="vim"===e?"danger":"success";t.innerHTML=`${n} Vim mode`,t.classList.remove("danger"),t.classList.remove("success"),t.classList.add(o)}window.setKeyMap=function(e){r.setOption("keyMap",e)},window.onLanguageSelect=function(){f(n[c.selectedIndex]),l()},window.setDefaultLanguage=function(){const e=n[c.selectedIndex];o.setComponentDataValueForKey("language",e);const t=document.getElementById("default-label"),a=t.innerHTML;t.innerHTML="Success",t.classList.add("success"),setTimeout((function(){t.classList.remove("success"),t.innerHTML=a}),750)},window.toggleVimMode=function(){let e;e="default"===(o.getComponentDataValueForKey("keyMap")??"default")?"vim":"default",window.setKeyMap(e),o.setComponentDataValueForKey("keyMap",e),g(e)},CodeMirror.commands.save=function(){l()},r=CodeMirror.fromTextArea(document.getElementById("code"),{extraKeys:{"Alt-F":"findPersistent"},lineNumbers:!0,styleSelectedText:!0,lineWrapping:!0}),r.setSize("100%","100%"),setTimeout((function(){f("JavaScript")}),1),function(){c=document.getElementById("language-select");for(let e=0;e<n.length;e++){const t=document.createElement("option");t.value=e,t.innerHTML=n[e],c.appendChild(t)}}(),r.on("change",(function(){s||l()})),o=new ComponentRelay({targetWindow:window,onReady:()=>{const e=o.platform;e&&document.body.classList.add(e);const t=o.getComponentDataValueForKey("keyMap")??"default";window.setKeyMap(t),g(t)}}),o.streamContextItem((e=>{!function(e){if(e.uuid!==m&&(d=null,u=!0,m=e.uuid),a=e,e.isMetadataUpdate)return;i=e.clientData;f(i.mode||o.getComponentDataValueForKey("language")),r&&(e.content.text!==d&&(s=!0,r.getDoc().setValue(a.content.text),s=!1),u&&(u=!1,r.getDoc().clearHistory()))}(e)}))}));
+//# sourceMappingURL=main.js.map