UNPKG

sql-editor-react

Version:

基于monaco-editor react 实现的sql编辑器,支持语法高亮、 关联数据库,表名 关键字 功能

2 lines (1 loc) 8.31 kB
"use strict";var re=Object.create;var X=Object.defineProperty;var se=Object.getOwnPropertyDescriptor;var ie=Object.getOwnPropertyNames;var ce=Object.getPrototypeOf,ue=Object.prototype.hasOwnProperty;var le=(e,s,r,d)=>{if(s&&typeof s=="object"||typeof s=="function")for(let u of ie(s))!ue.call(e,u)&&u!==r&&X(e,u,{get:()=>s[u],enumerable:!(d=se(s,u))||d.enumerable});return e};var ae=(e,s,r)=>(r=e!=null?re(ce(e)):{},le(s||!e||!e.__esModule?X(r,"default",{value:e,enumerable:!0}):r,e));Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./vendor-K_9f4zkf.cjs"),o=require("react"),V=require("monaco-editor"),de=require("sql-formatter"),Y=require("@ant-design/icons");function fe(e){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const d=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(s,r,d.get?d:{enumerable:!0,get:()=>e[r]})}}return s.default=e,Object.freeze(s)}const P=fe(V),{keywords:ge}=n.language,pe=()=>ge.map(s=>({label:s,kind:n.languages.CompletionItemKind.Keyword,insertText:`${s} `,detail:"内置关键字"})),me=e=>Object.keys(e).map(r=>({label:r,kind:n.languages.CompletionItemKind.Constant,insertText:r,detail:"数据库"})),he=(e,s)=>{const r=e[s];return r?r.map(u=>({label:u,kind:n.languages.CompletionItemKind.Constant,insertText:u,detail:"表"})):[]},Z=e=>de.format(e);function S(){}function U(e){return/^\d+$/.test(e)?`${e}px`:e}const Ee=({isFullScreen:e,toggleFullScreen:s,quitFullScreen:r,children:d})=>{const u=`toolbar ${e?"fullscreen":""}`;return n.jsxRuntimeExports.jsxs("div",{className:u,style:{width:e?"100vw":"auto",height:e?0:30},children:[e?n.jsxRuntimeExports.jsx(Y.FullscreenOutlined,{onClick:r,style:{color:"#000",cursor:"pointer",padding:"5px",position:"fixed",right:"25px",top:"20px",fontSize:20,zIndex:100001}}):n.jsxRuntimeExports.jsx(Y.FullscreenExitOutlined,{onClick:s,style:{height:"20px",width:"20px"}}),d]})},{keywords:be}=n.language;async function xe(e,s){const r=new FontFace(e,`local(${e}), url(${s})`);await r.load(),document.fonts.add(r)}const Me={selectOnLineNumbers:!0,roundedSelection:!1,cursorStyle:"line",readOnly:!1,fontSize:16,minimap:{enabled:!1},glyphMargin:!0};function ee(e,s){const{width:r="100%",height:d="100%",value:u="",theme:E="naruto",language:v="sql",autoComplete:R=pe,options:m={},overrideServices:K={},editorWillMount:W=S,editorDidMount:_=S,onChange:O=S,defaultValue:y="",dataBase:b={},className:k,children:N,...T}=e;A();const i={...Me,...m},[C,D]=o.useState(y),L=o.useRef(),q=o.useRef(null),c=o.useRef(),[f,I]=o.useState(!1),[$,B]=o.useState(null),t=()=>W(P)||{};o.useEffect(()=>{(async()=>{const p=(await import("monaco-editor")).editor;B(p)})()},[]);const a=()=>{c.current&&c.current.setValue(Z(c.current.getValue()))},g=l=>{c.current&&c.current.updateOptions({readOnly:l})},x=()=>{I(!1)},M=()=>{I(l=>!l)},H=o.useCallback(l=>{l.code==="Escape"&&x()},[]);o.useImperativeHandle(s,()=>({container:L.current||null,editor:c.current,monaco:P,format:a,toggleFullScreen:M,setReadOnly:g})),o.useEffect(()=>{D(u)},[u]),o.useEffect(()=>{c.current&&c.current.getValue()!==C&&c.current.setValue(C),m.theme&&V.editor.setTheme(m.theme)},[C,m.theme]),o.useEffect(()=>{const l=c.current;if(l){const p=h=>{f&&H(h)};return l.layout(),window.addEventListener("keyup",p),()=>{window.removeEventListener("keyup",p)}}},[H,f]),o.useEffect(()=>()=>{c.current&&c.current.dispose(),window.removeEventListener("keyup",H)},[]),o.useEffect(()=>{let l;if(c.current&&R){const p=c.current.getModel(),h=c.current.getPosition();p&&h&&(l=V.languages.registerCompletionItemProvider(v,{triggerCharacters:[".",...be],provideCompletionItems:(w,z)=>{let F=[];const{lineNumber:G,column:oe}=z,Q=w.getValueInRange({startLineNumber:G,startColumn:0,endLineNumber:G,endColumn:oe}).trim().split(/\s+/),j=Q[Q.length-1];if(j!=null&&j.endsWith(".")){const J=j.slice(0,j.length-1);Object.keys(b).includes(J)&&(F=[...he(b,J)])}else j==="."?F=[]:F=[...me(b),...R(w,z)];return{suggestions:F}}}))}return()=>{l&&l.dispose()}},[v,R,b]),o.useEffect(()=>{if(c.current){const l=c.current.getRawOptions();Object.keys(l).forEach(p=>{const h=m[p];l[p]!==h&&h!==void 0&&c.current.updateOptions({[p]:h})})}},[m]);const ne=o.useCallback(l=>{if(l!==null&&$){const p={...i,...t()};L.current=l;const h=P.editor.createModel(Z(C),v);c.current=V.editor.create(l,{model:h,...k?{extraEditorClassName:k}:{},...p,...E?{theme:E}:{}},K),c.current.addAction({id:"format.sql",label:"SQL 格式化",contextMenuGroupId:"navigation",contextMenuOrder:1,run:function(){a()}}),m.theme&&V.editor.setTheme(m.theme),_(c.current,P),c.current.onDidChangeModelContent(w=>{const z=c.current.getValue();O(z,w)}),xe("codicon",n.codicon).catch(w=>{w&&console.error("Failed to load font codicon",w)})}},[$]);return n.jsxRuntimeExports.jsxs("div",{ref:q,style:{width:f?"100vw":r,height:f?"100vh":d,position:f?"fixed":"relative",top:f?0:void 0,left:f?0:void 0,zIndex:f?9999:void 0,marginBottom:40},children:[n.jsxRuntimeExports.jsx(Ee,{isFullScreen:f,toggleFullScreen:M,quitFullScreen:x,children:N}),n.jsxRuntimeExports.jsx("div",{...T,ref:ne,style:{width:f?"100vw":r,height:f?"100vh":d}})]})}ee.displayName="Editor";const ve=o.forwardRef(ee),Oe={selectOnLineNumbers:!0,roundedSelection:!1,cursorStyle:"line",readOnly:!0,fontSize:14,scrollbar:{vertical:"auto",horizontal:"auto",verticalScrollbarSize:10,horizontalScrollbarSize:10},minimap:{enabled:!1},glyphMargin:!0},te=({width:e="100%",height:s="100%",value:r="",defaultValue:d="",language:u="sql",theme:E="naruto",options:v={...Oe},overrideServices:R={},editorWillMount:m=S,editorDidMount:K=S,editorWillUnmount:W=S,onChange:_=S,className:O,original:y="",originalUri:b,modifiedUri:k,renderSideBySide:N=!0})=>{A();const T=o.useRef(null),i=o.useRef(null),C=o.useRef(null),D=o.useRef(!1),L=U(e),q=U(s),c=o.useMemo(()=>({width:L,height:q}),[L,q]),f=()=>m(n.monaco)||{},I=()=>{if(i.current){K(i.current,n.monaco);const t=i.current.getModel();if(t){const{modified:a}=t;C.current=a.onDidChangeContent(g=>{D.current||_(a.getValue(),g)})}}},$=()=>{i.current&&W(i.current,n.monaco)},B=()=>{if(i.current){const t=r??d,a=b==null?void 0:b(n.monaco),g=k==null?void 0:k(n.monaco);let x=a?n.editor.getModel(a):null,M=g?n.editor.getModel(g):null;x?(x.setValue(y),n.editor.setModelLanguage(x,u)):x=n.editor.createModel(y,u,a),M?(M.setValue(t),n.editor.setModelLanguage(M,u)):M=n.editor.createModel(t,u,g),i.current.setModel({original:x,modified:M})}};return o.useEffect(()=>{if(T.current){const t=f();i.current=n.editor.createDiffEditor(T.current,{...t,...O?{extraEditorClassName:O}:{},...v,...E?{theme:E}:{},renderSideBySide:N,enableSplitViewResizing:!0},R),B(),I()}return()=>{var t;if($(),i.current){i.current.dispose();const{original:a,modified:g}=i.current.getModel()||{};a==null||a.dispose(),g==null||g.dispose()}(t=C.current)==null||t.dispose()}},[N]),o.useEffect(()=>{i.current&&i.current.updateOptions({...O?{extraEditorClassName:O}:{},...v})},[O,v]),o.useEffect(()=>{i.current&&i.current.layout()},[e,s]),o.useEffect(()=>{if(i.current){const t=i.current.getModel();if(t){const{original:a,modified:g}=t;n.editor.setModelLanguage(a,u),n.editor.setModelLanguage(g,u)}}},[u]),o.useEffect(()=>{if(i.current){const{modified:t}=i.current.getModel()||{};D.current=!0,i.current.getModifiedEditor().pushUndoStop(),t==null||t.pushEditOperations([],[{range:t==null?void 0:t.getFullModelRange(),text:r}],()=>[]),i.current.getModifiedEditor().pushUndoStop(),D.current=!1}},[r]),o.useEffect(()=>{E&&n.editor.setTheme(E)},[E]),o.useEffect(()=>{if(i.current){const{original:t}=i.current.getModel()??{};y!==(t==null?void 0:t.getValue())&&(t==null||t.setValue(y))}},[y]),n.jsxRuntimeExports.jsx("div",{ref:T,style:c,className:"react-monaco-editor-container"})};te.displayName="DiffEditor";const A=()=>{n.editor.defineTheme("naruto",{base:"vs",inherit:!0,rules:[{token:"identifier",foreground:"#d06733"},{token:"number",foreground:"#6bbeeb",fontStyle:"italic"},{token:"keyword",foreground:"#05a4d5"}],colors:{"scrollbarSlider.background":"#bcbcbc","editorCursor.foreground":"#d4b886","editor.lineHighlightBackground":"#6492a520","editorLineNumber.foreground":"#008800","editorLineNumber.background":"#333333","editorGutter.background":"#f5f6f7"}})};exports.DiffEditor=te;exports.Editor=ve;exports.narutoTheme=A;