{"_id":"@blocksuite/virgo","_rev":"513-178ecb80b64b3d28d27ac385fcb5d208","name":"@blocksuite/virgo","dist-tags":{"latest":"0.10.0","nightly":"0.11.0-nightly-202312120309-2b3d2ba"},"versions":{"0.4.0-alpha.0":{"name":"@blocksuite/virgo","version":"0.4.0-alpha.0","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.0-alpha.0","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"bf75b31d3afee9323262521467f34590f6905ac1","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.0-alpha.0.tgz","fileCount":70,"integrity":"sha512-UIUInObMIlqZSZqmccOxxhSea28MCp2gKpMyERahgs9zY97jafpwpLdUc+bP95lC4alkMxI9mfecfZvxA5ZHtA==","signatures":[{"sig":"MEYCIQCUSA4MQGByj/3m+Sb/kHVGEcHqKtskVmlKQBYWZADrNQIhAOpNJ2KtHwBo8BBxE+XVxXfcjmgIiNGCDfSYlY7HT3u7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2KkSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpEqQ/8D00F3xaGtXsS4cb4d6wH0SrvZBHcQTHfSEyj335PPlWOK2uN\r\nfg4xKbm9tc6d8pM4QIhLwTjlnHkLCoqp+O0WneDq0+SLdBV/wS5JdrbUi19J\r\nIZXYmDYtL4Fbob6+JrWMkIrTMATIQwhDMVD4anAYzyuJTjS6VlgqW7yYtn2V\r\nXbM0mAvVMs16ptPPDF8K65DTxk4mIV6t+HxPcJyNayJF5tJBcFuve5aI/JWW\r\nJrYXSPmD3x1RHvHp6YczUW86mf73XpHbaLM3IBTrKglRzTUq0NcaE8YZlFyZ\r\n4R1pcrqIjCa0fLUXf4L2XxN+h0mSjIMXoh1StAihxcnYILswfreZoetdvuyP\r\nlZfUNAUHsKifr9ltzP8+1gs1wDU9FofOReniDHQvV8YXR0bDhaPJAKUzVFiF\r\nomuosUKoR5BbuCPLcV52ZUjN4fRRyxSXyK9odi0t1SNNeX29VeX0ygLj9azK\r\np884IK1yOJveJlJ3fcPTblTaZUg2pW6ECvZY6ZrFJHYN+mhl2g6SEZazjm9W\r\n4je+SNrzOaR07SbB9hNlv6p8dcnNNLSTS124aWmbE6heIdukNzgue46ntq0V\r\ngY9vx94MF//UIvrG+BDOQz53pTjjifFvXnOD51//ViEYbWYQqE0kv5hSj27L\r\nTlXM4Ylq+BQw3n1YZBN1LtWB/MzYGnotbhQ=\r\n=wQev\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.4.0-alpha.0.tgz","types":"dist/index.d.ts","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:e2e","build":"tsc","test:e2e":"playwright test"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/66c4fa30a847244ae6c462749c247059/blocksuite-virgo-0.4.0-alpha.0.tgz","_integrity":"sha512-UIUInObMIlqZSZqmccOxxhSea28MCp2gKpMyERahgs9zY97jafpwpLdUc+bP95lC4alkMxI9mfecfZvxA5ZHtA==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.0","dependencies":{"@blocksuite/global":"0.4.0-alpha.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"lit":"^2.6.1","yjs":"^13.5.44"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.0-alpha.0_1675143442437_0.8735712354229126","host":"s3://npm-registry-packages"}},"0.4.0-20230131204452-60bc555":{"name":"@blocksuite/virgo","version":"0.4.0-20230131204452-60bc555","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.0-20230131204452-60bc555","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"d57dbeff4afb5103134644cd0ac6e112b74b5d36","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.0-20230131204452-60bc555.tgz","fileCount":70,"integrity":"sha512-gtORzuKS6vdXLPFkdj2BNvdUGKlIarhhrmpPAIB8YUCLevKljbhCtBMQaVMcqIXUnb5+bJEAl7+1h7Gc2wSh9Q==","signatures":[{"sig":"MEUCIAm8AWxr7HKgQG0t6BVPA+bXPyQrGX1Rjw9WJa5ev4c8AiEAyxVyqZMYGUECxnUPIAlrk5yyTzSnONJLbo+kexHPwTI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167249,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2bJWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoa/BAAhJhki4dUSgt4LOapw2jwt8NUwH2wj5SWHX4awPoOvaBq0BY4\r\nC4f1wxjuKIkhbKR4MsaCysZkNnNXUCkXfZIa6wbNaROFkf9C0QEXE+y/VsEW\r\nl6q6Bc6sBpEZpFGa7cDe6jjoO42Pu2ZiX80x1eywbpms0opd3CfrU17dUU6A\r\nBDcCwkkpESPkYaERw6L4JcLtw3MDkVbWWMbVjU17MG0ikwAkErEE/lCDHXeD\r\ncPS94mUkVzKZlVhqY5qY9cSncQEIEG/7tieeYCvWeLx5gx1yuGc2UqFokrct\r\n41q8RvUPSlD6aqd+1APe+tz0br1vFIbSUAtSN/qy+RKO2BdmGeiNEJtIL/L2\r\nFjgRObFMK/D7g/JIgcds0DLHyLALaanG90QBLjAGgfy1D8eu/NJp3WqlcbV2\r\n07+iQ/H7uPz+ubGGB97ABr0m8VgHP0NR84MhuTPlhCfb+6nBDzpVjqv1jIbz\r\nZwk2A4xAU+q3B/ETLITO5XMzuy8fl6xhBEciAvccfdT9ZdXo62+5QwFWwpqN\r\nZYO14hxTK6U23AMbgPvftHryk+juZmMdvIecQk8f4umeA+LTP4/cXcs4Dk57\r\nW42YT0KIXe+6mi9DdMVm8HODvc5Ciq3cgvxVp1QN17FmpC+mtRcp0vZiQUHw\r\nepEKFDS/YgC/FmcSBJQWllHwHa6TJtDCwdg=\r\n=3H4w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.4.0-20230131204452-60bc555.tgz","types":"dist/index.d.ts","readme":"ERROR: No README data found!","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:e2e","build":"tsc","test:e2e":"playwright test"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/f51208ce5a41c430457e4ce1861e7207/blocksuite-virgo-0.4.0-20230131204452-60bc555.tgz","_integrity":"sha512-gtORzuKS6vdXLPFkdj2BNvdUGKlIarhhrmpPAIB8YUCLevKljbhCtBMQaVMcqIXUnb5+bJEAl7+1h7Gc2wSh9Q==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.0","dependencies":{"@blocksuite/global":"0.4.0-20230131204452-60bc555"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"lit":"^2.6.1","yjs":"^13.5.44"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.0-20230131204452-60bc555_1675211350580_0.10672407520376237","host":"s3://npm-registry-packages"}},"0.4.0-20230201062929-3667cc0":{"name":"@blocksuite/virgo","version":"0.4.0-20230201062929-3667cc0","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.0-20230201062929-3667cc0","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"dc45c229c5578ee40b2b4b424cafa6cd09d86853","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.0-20230201062929-3667cc0.tgz","fileCount":70,"integrity":"sha512-Y86DS/ugwmR/8o0Xfe0zQtiFphZ+tHcWI9psGICFQnrAWtwcb4UUYtiaDrX0MOQQVSaQyryYxSlgGmMLjTyP1A==","signatures":[{"sig":"MEQCIGDsoKPgNR588lVSZ1p4+hcmyq/HTd6l9CnbYQx/uf5LAiAgX3Lwq1QjFY5X6kW/4Lg91JeRDeX5COmLvi0QACpjIg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":167249,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2gdsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqOcBAAn+F4Oaww0XTnfZQifo7MCncg1HfmybpwGngwL2JoVbrXVbNc\r\nwhSmnvvOGGhx8H25srxNJ3wDluBY5oVPyd3v+QaUpMOzX4hl/Inh0OweEfxy\r\n8KWVP8XouqBVdf+ShARvQ4Ukoj4IeeQb5aEkyKBE88P6moON45E7s6ZI3tCa\r\nYDisCITNDX5giRON/021VVNFKDZsMJyqZ20mLIXLkjLXjy/xj3dh+g87TxF3\r\npVYkPbyRvJ8yyExjbTVkiApn12YzApKR0pC8bEU9B+m5gMIN3dCVLLUKwiCQ\r\nzKuZOiAntgxlSA/RR5WBsBqyU/NponAAXVXv8yMPwjP8SuxBk9jnIeogSutC\r\np6IHcYRgt6E9f1uKDQ1N2tJg4rQ/5IMoI6c3owls53krPE6Dx2ftYk0LQ2FY\r\nZW45AWmQiA30hVR20GG9wEYN8kb/sr9N+I75Arf/Ui8Nyx1UU3rrBkm7CTiF\r\n2CQzMO0t3H7gzd8PpBB89plj8i6IuVivPANfkBAcDv1x8UHkZfi+rPqCgLdC\r\n9+dhxZESEmRLqPTNRZVQ9Gis9dXEmvcxx2t5nBI1et8sX6rdTg9fsfWR0ikl\r\nDYkjNr3JkHWO94ZgPqn2z2kuXmNbbL9En4TBluuxtCzuazPIIL1uxFxhJ0rh\r\nkxh09MNro+fbRSs09YXpqi04kMmi4bOIZI8=\r\n=V9Qy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.4.0-20230201062929-3667cc0.tgz","types":"dist/index.d.ts","readme":"ERROR: No README data found!","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:e2e","build":"tsc","test:e2e":"playwright test"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/d49282551df8f4fd7036cffcf43b87e8/blocksuite-virgo-0.4.0-20230201062929-3667cc0.tgz","_integrity":"sha512-Y86DS/ugwmR/8o0Xfe0zQtiFphZ+tHcWI9psGICFQnrAWtwcb4UUYtiaDrX0MOQQVSaQyryYxSlgGmMLjTyP1A==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.0","dependencies":{"@blocksuite/global":"0.4.0-20230201062929-3667cc0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"lit":"^2.6.1","yjs":"^13.5.44"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.0-20230201062929-3667cc0_1675233132647_0.23478278903046435","host":"s3://npm-registry-packages"}},"0.4.0-20230201063624-4e0463b":{"name":"@blocksuite/virgo","version":"0.4.0-20230201063624-4e0463b","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.0-20230201063624-4e0463b","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"228bdf782f80b0382275147b511a4947aafe4901","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.0-20230201063624-4e0463b.tgz","fileCount":70,"integrity":"sha512-fXswWG6/okRYdgKH33NMSVusB9raCniRQCYtA5wbWUsEUUQ4HMHLZAbLY92uIGCeGUvzx/JqxOWR8urPi8eSqw==","signatures":[{"sig":"MEQCIEb+39WOmpLozu6+AlobUGaktcZ78JstQ328oKMtfgjoAiBaorguwQ1PtIcIvsILJGYB3MBR4wDe0MHfYrapxwJV3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2gr4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4IRAAhUTJvKLdGdTbnA1JGeSqV3N8dvy6+8GNtliKI4O8UjRDBWh5\r\nyfYUqvrkKMtYClhTcfZcD1St+SgjzUdyMEF/snXyXoTc/oEOV5X0SDGyWfny\r\n0S1kfkJMKFNIitd+FQNyLr4c0k2qmOgQKrCPd8Voeh8OyUbeG/hNdwd2jmjW\r\n3DTRnYmoTg5mgjQt310CACeWdPpWygI3EtKmXF2PZZBPa21g5VGXgw2deGZr\r\nzxnLsYrCtsep+r3H1OsU6OJ45d+cdW/REeKWC7jKQoFru7+ebLgDPbMAkbZB\r\nLK3ZiiR6mKq4oevc+IZnurk2/sgoWQFMAdOZ7rDrZBornvAG6nWeJmt34Rx0\r\nC5D6RlwSxgH4Htx+D4e+61SMvqwI8nn2RD6FmiQcxZNgfGB7wSOQO6UPj8Sd\r\n/qz484gZKNzJz4bSTNre/6HP7ct+AVcYFtKzy0DLPDWM7CPUIisSeDrkmYCa\r\nLDk8mT3RPY37WCKLEvF7vZO1qNp/N4kc7beBN9ex7NCRS2lCXNSG2VEtfU7+\r\nTFUqc83gSqJovsXXORofTLy+dRhnUxGXjuIlFpOeaV7UoKXmrwHL3r6tzvgG\r\nXL8XIucUtPD/JqbMbfDqA0SdeMzY8j6Uuy5fp9jjZb9+tsutW1s6Ra8ab1ov\r\nUQctdIaUH/3Or/8efhIZ7201jXNYDfro56E=\r\n=W2hN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.4.0-20230201063624-4e0463b.tgz","types":"dist/index.d.ts","readme":"ERROR: No README data found!","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:e2e","build":"tsc","test:e2e":"playwright test"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/0da3b94b08bbd1ce619858a33db99b13/blocksuite-virgo-0.4.0-20230201063624-4e0463b.tgz","_integrity":"sha512-fXswWG6/okRYdgKH33NMSVusB9raCniRQCYtA5wbWUsEUUQ4HMHLZAbLY92uIGCeGUvzx/JqxOWR8urPi8eSqw==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.0","dependencies":{"@blocksuite/global":"0.4.0-20230201063624-4e0463b"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"lit":"^2.6.1","yjs":"^13.5.44"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.0-20230201063624-4e0463b_1675234040227_0.528844676939606","host":"s3://npm-registry-packages"}},"0.4.0-20230201220903-262005c":{"name":"@blocksuite/virgo","version":"0.4.0-20230201220903-262005c","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.0-20230201220903-262005c","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"497b98c1682587868db273d87894bc145619c986","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.0-20230201220903-262005c.tgz","fileCount":70,"integrity":"sha512-3xNc6SOB7VVysB7pJe8PpmN4AwOBbIsBasUBdv7VNC7pZwjBspT08S9rS4ldqDOfjGjtcltYlO9tCK6856Cx9Q==","signatures":[{"sig":"MEYCIQDkOmn+5eQF70RHghkgjYzSTOvh95WvpD++Nsomy66A0wIhAJ+mSaT46cBJizT014pQ40/QGMZ5dy2TIXyR/T49CaBI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172785,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2wMSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmouDBAAjLI9ll31eMKu+fy0w7zKfizOTS+0Hqi6fk5t2H3q1tuw07/O\r\nQX8+BLL7DRCbt8ztI/iMacIP18Jn5bQY8ZKLX0dsEvj14OTUlFDmcToOp0Sl\r\nS+7oCcb7dGgUOCm1hh9aq9FCGsu/3cJJvg1MejLU8lgdRoX3gVk7HWxh50+W\r\nhsMt6jzLVRApDMdp3/QZKHanyEj7L7qMT1s4g1S0DQvGY8/oRzhskOaIal6C\r\nwAbpuVXVgio2mXOXJY+SBoa0vYkW+385zDrMPO8G5o3nfVMEF2Qk1nsJQ6Nj\r\narkkPNEru2Csu685AQK75GFrHUDoczgkhLoLedINhMZ4SHywlS8ICHzMoOIq\r\n3cZ+skcOtV2HWVvP+69iwBYrsLAVj3CjllyLGv5OHkjhv5hPg7jJtAT+IRmT\r\ne5xtfgjvaQKSSVCDfo3SynjEQtptECMkejEOw5vGBwoV5rtBorcFBuUSGUnL\r\nTyp6Xr3Enx+aFED9yu9fkRFzVTT6L+7Erys0g3JSjLE5zmSxj29gyue0K/XG\r\n6MebuZthE+At+7PAmb5nFwC9PrKhVRTx6aa2nzt/5rWyQHbcckUZgi0U+02Y\r\ndiMW/CTnZJCV0dyNA+Aj3LhteU0YloRxB3/HSBQw4ohf4w/GAHGomPm+2nNN\r\nxDhpp9fxEhx+VHOWaV1toVAG1USOyMYq82o=\r\n=dj5J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.4.0-20230201220903-262005c.tgz","types":"dist/index.d.ts","readme":"ERROR: No README data found!","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:e2e","build":"tsc","test:e2e":"playwright test"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/daf604ecee5d92eaea8decf42239d35d/blocksuite-virgo-0.4.0-20230201220903-262005c.tgz","_integrity":"sha512-3xNc6SOB7VVysB7pJe8PpmN4AwOBbIsBasUBdv7VNC7pZwjBspT08S9rS4ldqDOfjGjtcltYlO9tCK6856Cx9Q==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.0","dependencies":{"@blocksuite/global":"0.4.0-20230201220903-262005c"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"lit":"^2.6.1","yjs":"^13.5.44"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.0-20230201220903-262005c_1675297553936_0.4518233309531017","host":"s3://npm-registry-packages"}},"0.4.0-20230203001426-a8854f1":{"name":"@blocksuite/virgo","version":"0.4.0-20230203001426-a8854f1","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.0-20230203001426-a8854f1","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"62ea7d8f6bfe14121480c9779bddce94722d3427","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.0-20230203001426-a8854f1.tgz","fileCount":75,"integrity":"sha512-2VCjzMs7CPPHSz75ra27assdrwk88/1zgOgVaBkdXMo/N1D5K4+BxsNKV11p46ZE2+DNirT3r5vHO5o31FTJ5Q==","signatures":[{"sig":"MEUCIGqtz5Jl62AbnBS3VGvYiDFbEBoKawQoiLGGR7QH46CrAiEA1739kHBp3Dqjp+u5d6YDLFZYw7JvuW06XN84m+wbst0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":180950,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3FS4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpj4xAAkBT5rME0lkPJAIj4RZzzG7MRchqqbRMG6T0vEDkN3g9hpZ5Y\r\nUo9sZxUFKOPKf/qQr/unbrsuyO+mr0rk2zDqygl5zrifMYQ+bhvuPZsXCzGl\r\n5BTbuQkIPmjxJAZp643JpmBkZaWvQwfjgf5ZcxCbNFlWQW10bKhSfrW/nggz\r\nFOwQioAb7uVfWgsdGNGBuL3MO5v7+sQDqqcya4OvudE9jMvyKgWTEGsOiEMO\r\nLzhNNRP78i/xiACxmOyU821roXEHgUOBNoh7VkQxorGmlp51zELemUYa2fPb\r\nqH7QIICaeCMYHu/c92BKyZxuQBzZqEhfVt10cE4ejtgWa5FcwsxsWa3y3uxn\r\nD4eBb7FgfgkiVHmTG2UwSjqB3Rafq2THWwzC5gMdUu4MvP+zP+19XoSZ2ba3\r\n0GEJoq9BckfIi66M0JW4bGTIRBeEOFB9Nzu6D8eLUbOYgszBFk8TjQ5+LSWR\r\nUJ89Ltevc4NrK//UbI3pG+WZUTUcitn7EuIK/TzxtihhPUef5kkMefesoZzN\r\nvCeadQkX94lMsMZ50tpmUBmL/brP7471UpQPY/PJja2nmIYkMIgY4wQjr7gO\r\nD5Q/9Khv2jMGYn5YkXREU0OuMgYtgUmSMZXCGVZPGDNMPGaaL4WjVDQHjU9w\r\nhEtPTh5MBTA21lnQg4t+9q4p4o0HS05bd/c=\r\n=kSgS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.4.0-20230203001426-a8854f1.tgz","types":"dist/index.d.ts","readme":"ERROR: No README data found!","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:e2e","build":"tsc","test:e2e":"playwright test"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/9eda46d51f148a538969688cba5f5f6e/blocksuite-virgo-0.4.0-20230203001426-a8854f1.tgz","_integrity":"sha512-2VCjzMs7CPPHSz75ra27assdrwk88/1zgOgVaBkdXMo/N1D5K4+BxsNKV11p46ZE2+DNirT3r5vHO5o31FTJ5Q==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.0","dependencies":{"@blocksuite/global":"0.4.0-20230203001426-a8854f1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"lit":"^2.6.1","yjs":"^13.5.44"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.0-20230203001426-a8854f1_1675383992502_0.401831051703436","host":"s3://npm-registry-packages"}},"0.4.0-20230203030233-b22bea7":{"name":"@blocksuite/virgo","version":"0.4.0-20230203030233-b22bea7","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.0-20230203030233-b22bea7","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"c6674c833588f9995d683b88bdac83702bdce110","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.0-20230203030233-b22bea7.tgz","fileCount":75,"integrity":"sha512-Jc7RpCkmBCj88xmtE9R9WFcbNBcl0X+NW+v42iYQ/1b3HuzWr2CaxxdHSMW/bXMQdXx/GrF8Ak0aYUYp6hQWDQ==","signatures":[{"sig":"MEUCIQDk1zvNPrP3yMTSVgD3mXO0HXqcdehCNlorZohuDL3XrQIgQXBdmAfp7HCERLg97ciKghKOsMm6SIKxCZCC/GtPYeA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":180950,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3HnjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2eg//TkoWwt1fBFdB5nfNFZ3Zj7yJxX0EPLwy4vBFKKiDwWirLNQM\r\naszniQcQ1kacpXblMM3pUU6jyuOo6HMDap8o6d7ogEyAmKDQiZAnsAQqcKtU\r\n2/Reu+8N5ffSG/QtciubdsU22Q+pAjCR4/eNcZSeAozW8Cxja6GFPNmAvxBO\r\nHCjjvVRDoYr2zCNJzM6bz+Iv+vzZAUACPFL+ipJgY+NAEYiC8Uj3iMLw/rCC\r\nNAdBKDioGDsheFSVXMh9GYCBYCvYCJN1XdtFfC+8x4Eq31FEOU9osZ1n7ubP\r\n9nCvZ3oEr+5mzcM1RGOVi51+hpWnVLMG1PsoEUO1nnw/0kXUz5zwoMYly5e4\r\n5m7H7UhjftBdLDqrZvWmpddf8y2M4Ohd/La4yRWjKs7laiUop5lkzzu2s8Hi\r\nnwaPCB6OZPDXN87pSQ4U69DHsXDUpvgrBaMRm+E7aluJrZfISoXBfKyMNQ+Q\r\ncopLNONIUPKX/wlSuGBNHV+t7Nx/fAmXGatEBpSjOBg6wS99XbMXB7npn/Aw\r\nuJ3wuHxR1qVGNRwhM3Ob1fAvBhGIDManU9yzciOefeHRG6cVDDjISTjuzbI9\r\nRMnGYC48aaOW3vELuUJX5MG92jjcZDS35dnzqNRld7WrxXGgQwROA0DgVq/X\r\nHFr6MLmn9a+0ZKSOz7AQw+xWo/Ea+W5G8MM=\r\n=f4CI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.4.0-20230203030233-b22bea7.tgz","types":"dist/index.d.ts","readme":"ERROR: No README data found!","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:e2e","build":"tsc","test:e2e":"playwright test"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/3a721852e96341f6fda109eda8e8becb/blocksuite-virgo-0.4.0-20230203030233-b22bea7.tgz","_integrity":"sha512-Jc7RpCkmBCj88xmtE9R9WFcbNBcl0X+NW+v42iYQ/1b3HuzWr2CaxxdHSMW/bXMQdXx/GrF8Ak0aYUYp6hQWDQ==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.0","dependencies":{"@blocksuite/global":"0.4.0-20230203030233-b22bea7"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"lit":"^2.6.1","yjs":"^13.5.44"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.0-20230203030233-b22bea7_1675393507704_0.45038318613749806","host":"s3://npm-registry-packages"}},"0.4.0-20230203145315-ce4acef":{"name":"@blocksuite/virgo","version":"0.4.0-20230203145315-ce4acef","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.0-20230203145315-ce4acef","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"1d1629a39c4679fe373a1eb50d8c8c3862ba535d","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.0-20230203145315-ce4acef.tgz","fileCount":75,"integrity":"sha512-pRNLIR8WcxkZ86pgZ2lKL49zG7d1ugaXcCBjPIGN9EBsanmNMmBGVVtELjIhxkQCzzHlU9umPb/ekFAdhgcQVA==","signatures":[{"sig":"MEQCIGrvIdK2AcBaaRRyY8FNnSX/NzzDjwurVq6Xw8RFIy1QAiBosmHjBMN8dmZbZeYlqbIUXKOz5g9QP30cnvDcz2s9gg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3TFKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqgQA//dhkPeN3eUP2D/tvnpbMKWFCwi9jVUrHSS5ZeKgxjmDkZ8b8S\r\ns8X33aN/zCdgkR57OZ8LfOM5XeCUpiBEazu0+PPUdPQb436I1XpjvQt4mHr0\r\nHfzGGjls6cbyaIGW2kM/A+u3Wh1SLMMxKCDepDoDEDV70rXbNjChQnraw/QW\r\nLNryvSrgVUH0l/gg2AIGg33L3Vdgf9Jj60yoF9jv47/FQj6INJphFu/hNSF7\r\npaFiihn1IuqNWkIMRlELOYfL8PuCjo0RNYo4JleRHL4ipgCKqs3X6AldYXjh\r\nrGJv12iw2xwyVvyuJOLIgiwdXT0tImNYkhbmOFEiuPP15sgzRR2UhodEvpvy\r\nqKaAoSmh/VAGu8HTpFXzFBHJDZa4IJZNuwSGYU2HiB4nSwkGhIhksFipThl7\r\nVHjCBegIpjEilJGYiMhPj/es8M1GfzEkgjaH2kkQEaUVLq0tl3pItFEE/te+\r\n+yoidoZbzkj4+O9JZjCjLwLZoVdBx8u1FhV5ktT6QN7Og3c/lNvk9q+AwJJk\r\nTr1WEbhisnVNxphRKyK253OKbkOlr2etM/0shE8VWFTUzB/oYlOq4RTVE0wn\r\n1bxyJdDjdB76jgOefX2NpDaqVIkuaiqgZIMpgSoke3yx5h+O3JpYh9SybZV3\r\n3PRv9peUNh02wcLgsyW5GHe7fj7UYJnDXTI=\r\n=qL0+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.4.0-20230203145315-ce4acef.tgz","types":"dist/index.d.ts","readme":"ERROR: No README data found!","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:e2e","build":"tsc","test:e2e":"playwright test"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/77e02a47900a95da7739b364c6b34a24/blocksuite-virgo-0.4.0-20230203145315-ce4acef.tgz","_integrity":"sha512-pRNLIR8WcxkZ86pgZ2lKL49zG7d1ugaXcCBjPIGN9EBsanmNMmBGVVtELjIhxkQCzzHlU9umPb/ekFAdhgcQVA==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.0","dependencies":{"@blocksuite/global":"0.4.0-20230203145315-ce4acef"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"lit":"^2.6.1","yjs":"^13.5.44"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.0-20230203145315-ce4acef_1675440458587_0.17606117555094603","host":"s3://npm-registry-packages"}},"0.4.0-20230203234453-6122cfe":{"name":"@blocksuite/virgo","version":"0.4.0-20230203234453-6122cfe","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.0-20230203234453-6122cfe","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"3f3669041d4cdddb641e4c991643cf28499b3304","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.0-20230203234453-6122cfe.tgz","fileCount":75,"integrity":"sha512-esKlyL0/FZWXIKp5qez5GltPEAYsJRZrNXoqtQIWuAkw2qfxehOL/kUOf2vuG29MJ31XrUwLGgkrxGKB0RjfCg==","signatures":[{"sig":"MEQCIA2bj3BO/X0V/Cw7dqrQeyErUrJo1dqD5FUR9jl39yVfAiB+3o/RnI0tq6Pd5FeUie/JidUclNrodQrjayCvAqecTw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3aXJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrsvw//UvWrHuIPVHXlGdMILwq0hHdnEh/XZadNIbF6dI6Ukp2ut1Ti\r\nsnkGJ2EcHhZCkRDKFnJLgum00F/U7JadcYsfBvMzx3j9hRi6vGsKMuNEBwqp\r\n5d8vPCm5ltdhrJ46ILbfbIgSoU557jzigodPpUK0yDWHmfMfnF5kETL0i4+h\r\ngX/rmv6qQ/keK1VgIShP0ZrwL39sirNvyMnTEDzm9c6YE6b6JQZfseODGgUR\r\ny09YxGCp0arRoDUtcuwTtkQ9IET334RPHZcfg5v40z53PcE7vufX43NlQrME\r\na58JCp1OYXdqMZlZzzge1q3K8oLrOeEsTN3yuCcAlb3bCjbw6/QN+2l9Zb4g\r\nkVPSiji7ug/0OvDG7GQsnlPWyGzoO1ZhsH+EKJ9SCvzBNklNEz4cxxH+07Bb\r\ne2AyiCLHBKqQoEtqhlJtV8TVCIvZD9++VssmKyNVYQxQTKl+UbPpRT4ujSBG\r\nGUUjv7KtjxSq1vsywwRir+9Zf5yvAVy2t1NahU12mgo8IsNMez/4TAdnpw5h\r\nH4IEbi9yf9sGuyaLa8ZkLWF0ihzq195rkdNEJcaN+q3F6HH9zNIMbL/EQfNe\r\ne1/FSDzXlF1aC2RT6ilCk0m99jiUaCFRUl8DzkSpCJatCKkHHF1CkLPb+IBq\r\nHo9wNmELon5ln403OXMm8nZ6x6EGbU1id3w=\r\n=REQL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.4.0-20230203234453-6122cfe.tgz","types":"dist/index.d.ts","readme":"ERROR: No README data found!","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:e2e","build":"tsc","test:e2e":"playwright test"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/f4022f9961c3b23bd72834077dc66cf4/blocksuite-virgo-0.4.0-20230203234453-6122cfe.tgz","_integrity":"sha512-esKlyL0/FZWXIKp5qez5GltPEAYsJRZrNXoqtQIWuAkw2qfxehOL/kUOf2vuG29MJ31XrUwLGgkrxGKB0RjfCg==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.0","dependencies":{"@blocksuite/global":"0.4.0-20230203234453-6122cfe"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"lit":"^2.6.1","yjs":"^13.5.44"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.0-20230203234453-6122cfe_1675470281271_0.6498907167007917","host":"s3://npm-registry-packages"}},"0.4.0-20230204233304-6e37e29":{"name":"@blocksuite/virgo","version":"0.4.0-20230204233304-6e37e29","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.0-20230204233304-6e37e29","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"a4f6c82d0666cc5dc803aeb0d0df6cafb0cda249","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.0-20230204233304-6e37e29.tgz","fileCount":75,"integrity":"sha512-P9vd+vibdPckp6vkoEZpjM5tT4fOwQ689BM650q2D9CSaGEZQdOrGVRwNfX9xImGNnUrFUgF1dRvlj5n52Dgeg==","signatures":[{"sig":"MEUCIFLF3Jg9H2H2CpOwMJNsXo9o4H1pwriTtRfwFqchyukaAiEA2P2fgL2JK9zDGCnuhYYo+baVuau+QNxWZ91o60GA1og=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3vg+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrd3g/9FUpzRqdBHCy8hAlNJ8+fY+wHrTPReB88hKCfMamLWpC7J+5q\r\nCERgvNU6IV5XIfarhNu6AGHaNnw1WZMcVcYr91bz7wzC+dPRfJgo7cbcDLs4\r\nDvsIoyWZtxug+AWkxz9uj3D2JTVCwI8YRNVUQv8vLugsQ7D+3doTkQmxNXEo\r\nYkeBZQLctHAfqVhxeexSqcAY7hUQh9bX3wjdw0YMh19EcEGReXd+yAhNzt7Z\r\nlVuIZ8QNw47BthJAiI6W79YITl50OBD8+M52oriVxB033haT+V/SiVoO5GzQ\r\nbZ7GBy/cmwbHFl/Q1Y12R/VCndy086hTjKJXjCDRZM1WYLVKKginPf2zEa52\r\nfRijCqWzY4jJYCXM+7jid599sCb3KeuS3lJwbJy+SOjBflmC1UxsJ4SVElBs\r\nju0/vsGVEEYJodiR971/Ngpeu+NKd1kw9PycFv68zRooiEDO/Ia6cxxY9e/x\r\n4X+wr7281k6gKrmy6PqLT7Hrgsdzukn6z7QVqRkg55Todlhoq7nCXvS/HgOO\r\nZs+OWS1KK3d6wRKk0gydSGSA9Z2ikPkfZ4caLa0tjtRx32KdLtLNXVV8CAo5\r\nEfhEfqB8GhF14OUIZJax7fKa7a2bp6x++Nu2gEokPidMjZSo1v/gv5j3D7P+\r\nqJ0G0CrKuyyzKmBkEhdT+zUxpT/QW+1hi0s=\r\n=0rA4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.4.0-20230204233304-6e37e29.tgz","types":"dist/index.d.ts","readme":"ERROR: No README data found!","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:e2e","build":"tsc","test:e2e":"playwright test"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/57907286c234016039484fc9fedcb4c4/blocksuite-virgo-0.4.0-20230204233304-6e37e29.tgz","_integrity":"sha512-P9vd+vibdPckp6vkoEZpjM5tT4fOwQ689BM650q2D9CSaGEZQdOrGVRwNfX9xImGNnUrFUgF1dRvlj5n52Dgeg==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.0","dependencies":{"@blocksuite/global":"0.4.0-20230204233304-6e37e29"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"lit":"^2.6.1","yjs":"^13.5.44"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.0-20230204233304-6e37e29_1675556925843_0.003124543533955304","host":"s3://npm-registry-packages"}},"0.4.0-20230205175611-17a62e3":{"name":"@blocksuite/virgo","version":"0.4.0-20230205175611-17a62e3","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.0-20230205175611-17a62e3","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"ebfd35a417eba2ff1778cc9f0658199ff20a0649","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.0-20230205175611-17a62e3.tgz","fileCount":75,"integrity":"sha512-qWWmV/QnMP2kDNzN2e8RcNffTpLK0Cw6KrCBHhSg2TJqjTohVwBG+x4oSmS5vhh76WVvDCEwnEPQ1skVguHoSQ==","signatures":[{"sig":"MEUCIH8cMJX42Rd0+gT72rhantGS601h0qlmm0I+qJ9Y0wuNAiEA4AfpxFns1QGEGtFw7+AEvzDGNeSdqRlc36VAOBUKUf8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":204532,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4Ei5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNJA/+Lhsi9xBTyPvCfv9u56GHyp2E781CTD/oNwmdB8lG5KBcshTE\r\nF6GpuL68DoT4GXY5b4By/PHJYhLQpxmpC0liBTy9s+kMKTkrGrU0H39wZjJX\r\ncasPqAa73WyysH0xR3/Tq4hl+9bgR/+jP7f6UWEesgGvUrnpYptN8q7BtgJe\r\n0W+8JRHrLb2RW2LlXOzLuCgjLPWXL1B6ioUFScaAtcHLk0r3Uy/cGqmkS97j\r\nGr9sWsIvHnMyvKda06n0DzzHBtLgCv7/8HNmYGmx4VD9ZyoOrUS0aFKZKbnO\r\nIyUt3n+A31TzrUJwlnJNVaoJPrQIekYf3Cwgi2xcs/RL6TF/G8evCO5zquhF\r\n3Yy1rFBWOYqUdAooSXD60OwYD4eiSyx8FjyYFuQ2S+alNzvXEQZ4nSgV7jfV\r\nZ6N+Zlim8TI7g3ZRSzUdu7Vnd39Z5DRSwrrZW5uBwxponUSmCMYUXHLo+pDe\r\nYY4lxcKSfs1GWBOkIopRYsp0b4m9hkbjDhgul6RzX6Cmxhq4HtsgDToERp2N\r\n9ad9j6EPXhXpgWIPwKBGVC+ubnvsboUVftQ3xUgs/h43RWAhSlpwXQVtMhB8\r\nZAnAnmgVIeOv3dsLBIt2AveCre//WikBHHbTM7rLM11/EuiD2E7yQsuHspJG\r\ncr39lPm1HQw//iWop9MMYPnzh4UKgKvsaEQ=\r\n=n7ou\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.4.0-20230205175611-17a62e3.tgz","types":"dist/index.d.ts","readme":"ERROR: No README data found!","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:e2e","build":"tsc","test:e2e":"playwright test"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/a9b02099f41602ed1dc8be78097050fb/blocksuite-virgo-0.4.0-20230205175611-17a62e3.tgz","_integrity":"sha512-qWWmV/QnMP2kDNzN2e8RcNffTpLK0Cw6KrCBHhSg2TJqjTohVwBG+x4oSmS5vhh76WVvDCEwnEPQ1skVguHoSQ==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.0","dependencies":{"@blocksuite/global":"0.4.0-20230205175611-17a62e3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"lit":"^2.6.1","yjs":"^13.5.44"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.0-20230205175611-17a62e3_1675643065029_0.0837030279321005","host":"s3://npm-registry-packages"}},"0.4.0-alpha.2":{"name":"@blocksuite/virgo","version":"0.4.0-alpha.2","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.0-alpha.2","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"c789160501d4d0c08b2d842009f0a0bb61ded49f","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.0-alpha.2.tgz","fileCount":64,"integrity":"sha512-ZLyQeBULa4yD0+wlP56miSZi4ljWYLvvZH54CEplVsOFqtYs0LruBsELc6z7cBkfJR1awdeJxNj/6qgKEwP5FA==","signatures":[{"sig":"MEUCIQD2M/SObCMjev6lvgQNQwB7mK5BkSsLGnfOx/azwOrL2QIgN9GCN8e7zyZXe1RPDb2Pn4V4HQ23xBj6uQlQ8X2dOuA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161029,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4VckACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmolzxAAmnQR9GH9u28bnKfDio7y6bOxDYDGwiOgqGO2YXtOFKqM4B8o\r\np6I1B1uA/twUdP+M+HX0cesquhhOPapOlhIsGw35Wox1+UkHulTq3audmoxe\r\nx9mbrmlEgH3MtCA3HIK7RDmzsYLxo/7LwUa8OTO22+LcaIm/QN/lhLn001zY\r\nQ5cmvkueD7Eo4ONYkv6HoZXkya/3vKR1+MBulpuVojW0HmlhDWEd1HkrEr52\r\nyxgY+OIPsZZ9QxKGWH3jkTh4p+j0IXBYRhRWcYOfYm9GcQ28gCYV84RIP6+g\r\nWu8X65xN+ScKEQShxa/zORaAfg3gyI6kQNL3d/HV8/kL4pKGMVQHPlacbiMX\r\n4fqRFzJX7qNxnayvB6YQQWQ2GS6jAg83Zhq+QltIRnTkcGs4Z/y0pxCumY27\r\nkMychBRiFiVsCiNoI5U/n8rSfaHLzu3jn7DsAWohXlYsWc8cDnB0mZ83N0tX\r\n6jWoQCW4P2EWzkrASDaOlRS7n7PvIAYrl1P/NNY7XSeuO24Vp9n09UAGOoth\r\n9D8cIiRbB/AHtgW8g31ASbw/FJAdEJM7R2eeX+Ns/ROzE67HCgHAghhXWQNA\r\n8LY7xiHFe6tBys6jN69ncJSmj9sq9kUjlsfwwsj+1pQ5aDrHdSHZT/aCrfiz\r\nqHscYonrqM6zkAKPRS5SIHeCJwohs4pLFAk=\r\n=dpOA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.4.0-alpha.2.tgz","types":"dist/index.d.ts","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"build":"tsc"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/3ead42cc4653b92aa15a5eac59cca420/blocksuite-virgo-0.4.0-alpha.2.tgz","_integrity":"sha512-ZLyQeBULa4yD0+wlP56miSZi4ljWYLvvZH54CEplVsOFqtYs0LruBsELc6z7cBkfJR1awdeJxNj/6qgKEwP5FA==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.0","dependencies":{"@blocksuite/global":"0.4.0-alpha.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"lit":"^2.6.1","yjs":"^13.5.44"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.0-alpha.2_1675712292712_0.527280672222374","host":"s3://npm-registry-packages"}},"0.4.0-20230206205011-523956a":{"name":"@blocksuite/virgo","version":"0.4.0-20230206205011-523956a","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.0-20230206205011-523956a","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"301c0450383c031724f4fdf6357a7a6fe7926208","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.0-20230206205011-523956a.tgz","fileCount":64,"integrity":"sha512-MlqbMjIzxD8FUtNwWmmyrfe5HgZURDd8qGSjzZFHrShf3A6EnxcT5wldpzA1LaPO8UakxgOK7TFA94HrIzvdog==","signatures":[{"sig":"MEQCIEVOfD/ZLnrFgUmjKvg+0grgQ/6C4jF7ouzokmnmYoQHAiBNjZnnUeOogeodR9z3AwDxHuV2peduaBctEZ0RYfneLg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4ZrNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpPghAApFR5svIngKGUU5qOU1dYSBslOITWEtQqvhhPqplOVGRsWliG\r\naNT5fjboJglRXZzyrZDNrs/vPNsOf/6MklHB0xZ4nkvlnlxqfzvKe1SlnsTX\r\nmBuEdn5AjWEV7+nK6YjkwZMPmv9M39pCeTphBKu8PwZFZXVhJHhSuOceA/u/\r\nUq/LuuJMP2qe4iLNdQFJvLdGfcru5UHeiIjBi3Cbu7s26KS0Fp2h9PKHkh+Z\r\n5Wxu6a89yA+H4BJp3idUzMGjdGckKKqkUiqnSuv3pi2cQ94KsMUiRCWNgDvZ\r\nnaMwcsjRQb0H5uJtgSJbUcMHKXuAANIPDn8dq6v+g/k8f6zJ70VHKGSse5ze\r\n28Fc7Eep/FkrNShBj/ffYOQsyrovGtw+M3vSCFgbKDMonmO73COqLrj4DIUm\r\nZwIo/nHXMJqV2GCUI7cl3ib7zKHWZcSY0xS/2dEcTszcjw1mznydQoXpEvi4\r\n4P/F8Ht5ipEeKAFdzwCAFPERU1hv+bE0HeRLnBlXgOXpizAwDt1mWGSaUcL0\r\nvXojzvyKFzPzVe8ANYKo1DzlrHfTzWT6W7M71y49E3sRa+DQnHB/2NS4UoFA\r\n97e6KsOExXEXgvrzuF9aSnfDLi8t3igHB1u5e4U8+aMRfwI2ws0d85idGX/0\r\nmVHabUhiTkY18SIMIYHMAXZ4CYRy/fmkZI8=\r\n=zpJ6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.4.0-20230206205011-523956a.tgz","types":"dist/index.d.ts","readme":"ERROR: No README data found!","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"build":"tsc"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/86dfd2cabb7ee64bd14bc5a93f3a5265/blocksuite-virgo-0.4.0-20230206205011-523956a.tgz","_integrity":"sha512-MlqbMjIzxD8FUtNwWmmyrfe5HgZURDd8qGSjzZFHrShf3A6EnxcT5wldpzA1LaPO8UakxgOK7TFA94HrIzvdog==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.0","dependencies":{"@blocksuite/global":"0.4.0-20230206205011-523956a"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"lit":"^2.6.1","yjs":"^13.5.44"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.0-20230206205011-523956a_1675729613035_0.7794239990910876","host":"s3://npm-registry-packages"}},"0.4.0-20230207201257-d147e8c":{"name":"@blocksuite/virgo","version":"0.4.0-20230207201257-d147e8c","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.0-20230207201257-d147e8c","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"9a71dac099d6a2adbfb3816e873b7a4599717ca7","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.0-20230207201257-d147e8c.tgz","fileCount":74,"integrity":"sha512-dMs+HVtNaAAv+Lg8rZWGl/uJwMeQCYkg6XFeZ2zZKSFHsOOo8OHLKdK6dYTf/ooo7WMh84updXhDiwqNSeQVWQ==","signatures":[{"sig":"MEUCIQC/ComgdH4XJJG0YqUGDuv90pS9i84LdskkiY9XvlN6swIgKOJD2zbk6Rpls0MDxa5nII6CiIJegloEkADDQRV4Rz4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":204183,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4uv8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQag/7BoeLrwX6a3MSFxWfjOq61xkKIv1pbDqGrg1GhSMXcsWaPEJS\r\nKKY0uHvXVVo1p7m4XM2+4li+8kP0iwn+o5LnGDraAzx3fmqefB09EzchF+aE\r\nyQB77s2Z/puEKcx0b7ZDTxGcSDaZSq+uEmxs1n9bNoE+IHPsEUVXxmBOPPK+\r\nFn99jhbxrqtSUb4MCh5ZcNW7LcrK+cZ/L7nBF9AuENjWT4jdlnhZ3kraHvu8\r\n8rhZtJ5mbS76vOT07mrobA/T8tQOQH9OiQIaMs3N0SW4x/5D5+589S/1xfZX\r\n3abxUX7r0zKiCkCST827zE0emB7MQK1yBnEgROrxsoAhWueMfhU2Fbr4dl44\r\ng4hnofjz6OhOUJbffsBxh8QO3QTP1jc0kY4/7s1yDYUWVbCp5JrumM9wSRdb\r\nqVMrNjXnFBK2Ryman5OkowRz9GZT70QLvfkE1ogNOPQOSgrkrhAQZ4zmHr9O\r\nwnqp1tgHnKM8t7BPJchN+tAx4pfLNOl1/DwWpGc5jgGf/ZUjsEkMTpVo0WxC\r\nS3dWLTV+GianreBiHbriVuxL2NOlgkrmDSbNnnfxIRktOwIaWWJwFakXstrR\r\nvk6nI30T5gTPaBVCrM7ZAsajRWHyqVsoIHZLPKzOJMkIOCDMoFrNHKnwHz9B\r\nkoNNpjaVZCr+frkySdOXyuxAVZhSpxebqu4=\r\n=XkS3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.4.0-20230207201257-d147e8c.tgz","types":"dist/index.d.ts","readme":"ERROR: No README data found!","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"build":"tsc"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/e1077d6206be0579966387f897601bfc/blocksuite-virgo-0.4.0-20230207201257-d147e8c.tgz","_integrity":"sha512-dMs+HVtNaAAv+Lg8rZWGl/uJwMeQCYkg6XFeZ2zZKSFHsOOo8OHLKdK6dYTf/ooo7WMh84updXhDiwqNSeQVWQ==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.0","dependencies":{"@blocksuite/global":"0.4.0-20230207201257-d147e8c"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"lit":"^2.6.1","yjs":"^13.5.45"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.0-20230207201257-d147e8c_1675815932506_0.39340075118823803","host":"s3://npm-registry-packages"}},"0.4.0-20230208200347-b55e9fe":{"name":"@blocksuite/virgo","version":"0.4.0-20230208200347-b55e9fe","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.0-20230208200347-b55e9fe","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"454f640e799f2296e087e4eaa1129e50286e6e30","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.0-20230208200347-b55e9fe.tgz","fileCount":75,"integrity":"sha512-LY4I+p3RiXHX8O6skiv5Q7CsDtMt/IYfIqI70GIv25mbMAABRjR7Yh/fBKcpytrQotviC+TF8SKHn7bX7PYySw==","signatures":[{"sig":"MEUCIQCfjZpJ549lqOu1pcMsn0he2dUyPR1t9IjQk8F6EU9XxAIgUSa/clNRRiIUSKQjv3BRKPIUL0Xm+F6rq+lygBshZOU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5D2mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqoiQ//R1uAicFv1vzshcu1+6l3Pjz556nWr9JFoUlMGk5mFOOQchF/\r\nijvMLoQiMc2AdviROttvkYZxAjE97R609DvKncWHNzOot8dyKBpBrRMp0vxk\r\n9AVbG3g5jodf/q+kARmqqgNnSUVpQJuTP6m7EUPeMG76w/1B5fzJJarKon0l\r\nqrCAc+P0vHuckQL6c5/z6EPyloPIIrzTsf0bmfaiI0fypkPjTAeoIIvl3q+J\r\n5z+As6kgCNg3xXDYb54A4lYMKKDHbOZN52aJLg0oMudfZAEescuJctNNcEP8\r\n/R0bP2ZEKobzcJtinhwLmB7y0b4IOLhUIymB+TDk0Nk3eizLMPMU5hm6vOgn\r\nXHelKPA4KyipFrNqm9z0TcdqgDZFVWk4+Lv7EjVxlBMR/2Oz0Jx25MABuA9j\r\nV0h37s2YoENpGnrpyKkSdAam9R9yH1XVE5uhvPDWrffvDG+hh/mqmtt7b2Eo\r\nZ/0ToiLc/9e5nkBNGoWxJaQieFI8cH8r2mTp6TwpBgwMkuxBYc2YkUEbvVgS\r\nCS4uu8sRnpfWKhActdyyje6+sDfHFNNARYeJNJv8yfIFTDNZ7gHd/qwbosZ8\r\nxyPk6CnAq58gnpeebzXiiZLx5FLmSiNrbB3ClaMYEKXa/UwnvuVEp8u0rMbQ\r\nxajwshsPvWlD90q2rMzjtkiZG5nqlKSNW2o=\r\n=Tn6r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.4.0-20230208200347-b55e9fe.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. This means that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa',\n    attributes: {\n      type: 'base',\n    },\n  },\n  {\n    insert: '\\n',\n    attributes: {\n      type: 'line-break',\n    },\n  },\n  {\n    insert: 'bbb',\n    attributes: {\n      type: 'base',\n    },\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      type: 'base',\n      bold: true,\n    },\n  },\n  {\n    insert: 'a',\n    attributes: {\n      type: 'base',\n    },\n  },\n  {\n    insert: '\\n',\n    attributes: {\n      type: 'line-break',\n    },\n  },\n  {\n    insert: 'bbb',\n    attributes: {\n      type: 'base',\n    },\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"build":"tsc"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/df136a25a75891288d985da77d4ece13/blocksuite-virgo-0.4.0-20230208200347-b55e9fe.tgz","_integrity":"sha512-LY4I+p3RiXHX8O6skiv5Q7CsDtMt/IYfIqI70GIv25mbMAABRjR7Yh/fBKcpytrQotviC+TF8SKHn7bX7PYySw==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.0","dependencies":{"@blocksuite/global":"0.4.0-20230208200347-b55e9fe"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.45"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.0-20230208200347-b55e9fe_1675902373709_0.25636304198099835","host":"s3://npm-registry-packages"}},"0.4.0-alpha.3":{"name":"@blocksuite/virgo","version":"0.4.0-alpha.3","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.0-alpha.3","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"985af3267574a1469c31cc8515a2061307d4e7a6","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.0-alpha.3.tgz","fileCount":75,"integrity":"sha512-uEa2bH2XCNI5whF3LUJAOogmv+5gux4m80dge7dXslw+6UfbdS6tDTP268a0k7FCPiV7suAcGbT/y5wZUbJ0ow==","signatures":[{"sig":"MEYCIQCmDsceF05+mOnu0oW/vH8zvrF0uscZQQQDKVk77XQYjAIhANbZ4ebRPmhmx2kvOD8WjPcYKJX64UnMHSpIhLJEfj3A","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5JaXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrVoA/8D09OdAciZBpi8v9pCq4+9o6IXd2AhSaUhokZKmG/bXZdZudk\r\neWKN77pZbHh+b4RDVuK+B7j64l8ILdktp+b5xLwp5q2PiONidjRqHN8+Y3eS\r\ninjQGw3La2JY3N9oLZJoVMe3FskhNK3j23JKBZGmkAqHCZKMqqkVTLqZOV2O\r\n+NH32JPo5YbKXNNacdR9ZODt79w6+hCPT77aFt0+EhkP3cOGLiYqJl8xyE3+\r\n4D9IiMK+SEHMbOEXd2gf3HEvh0T9fKkiKkextn0TdVBwTpscDlURTc0UQ8sP\r\nQfbBBHH/cP3IWVvdHC7dfuI5huTRUorp7T3HlhQyez5OuTdCrhZjux6GieHM\r\nytlYC75NZNG2zVmf3sIWpIOROALwBE17aHZbOmDfnzMrwtRmgMnU6b5zSO7I\r\nhpF4tE0CaqALY+hP1ESM4oIKGnOIjf64y4hDLO7e/k0Z7oNWcratrIDo8q0t\r\nY9q4cZZQbOQC6+uHB7wWZZSwnwzf1h9cVvJ+TxW7VskQ8srdtvEDl0CQ1sdy\r\nc/gELmOPd/X0B/KnBgaeGHXgeHKvA3r62WUof1H5X8qiVwWyOqFypWAW2ZrD\r\n2qk4/vXj+TthBKCuGNW4FW0t4/zfomSZGNJaCUrDr0K/PRMmHS1i19hvke/l\r\nBqrlzG73z8gQOByTja6DlCzwGZtdpxdzwIU=\r\n=dTRL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.4.0-alpha.3.tgz","types":"dist/index.d.ts","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"build":"tsc"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/8ee078cc1086b2dc3f49a6f0e5e3d406/blocksuite-virgo-0.4.0-alpha.3.tgz","_integrity":"sha512-uEa2bH2XCNI5whF3LUJAOogmv+5gux4m80dge7dXslw+6UfbdS6tDTP268a0k7FCPiV7suAcGbT/y5wZUbJ0ow==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.0","dependencies":{"@blocksuite/global":"0.4.0-alpha.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"lit":"^2.6.1","yjs":"^13.5.45"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.0-alpha.3_1675925143298_0.4561679742117548","host":"s3://npm-registry-packages"}},"0.4.0-20230209191848-0a912e3":{"name":"@blocksuite/virgo","version":"0.4.0-20230209191848-0a912e3","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.0-20230209191848-0a912e3","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"d43c0fbb2816f3efd1d99db8732234480ff84f46","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.0-20230209191848-0a912e3.tgz","fileCount":71,"integrity":"sha512-KSIVFf+xfwDoPKcw8OCD1HmCsOXGpuZoP1FgCSGsCWtYoG/jOseF//1VPCrM3A9uL0fOd3mdXRUBYXFFVgdxow==","signatures":[{"sig":"MEQCIDCsohTX9yHeVc+c+EbtIYG74ZOn3mw+0mm9XbcU11EkAiBSr54qbHtDGrXKlSwb8UdZUJotHhiOUEal3w2TbWb4vw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5UiyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrsmg//QX7783Piyuy1lP97vEb3XxbK9LCv1rcWx80BYssL/SR68MsJ\r\nwsGMslx+myroqGrryQOAXE6V24t+aH5BUvgLUw/1PvDb3AUCKIBedmTX0KhW\r\n1pUnR4tN2s923VVrfA3YKiHhhXD5KhZzdkfRck0TbsK+aIrVE3BMJ6/VTCYL\r\n5/a1CZByk2zYwkELPjyiXpykIWmFPzMzTP08smZbmGwo3PsMSfOpuGkbUUXj\r\nQe7bg15syt67YdM4i/aO4xhg8cW4NipiALmvVHvmsShbF5+BwTlQEbu8oiML\r\n9jvXYLoTr58vjSs/w0xl+6N15qwCgpc4NeLprMOsjSCPPnqwGHyb1wSB9bSW\r\nsSQmTuXoOZoygywqIcCDVeIX1KZWdO6tcd29hAtpFrgefs17LutGSz+7s+tp\r\n1ScbG/Bdmg11EF7UfTYoOGRwundz+26ydNGq2wHc+5am127spPHXPmp2sfZx\r\nwYxwZx/00pAQcHwB0UrFsDdlwoFe+sCa2z7l8E+hzu8xl02Afb4U+Bmg/xfk\r\n8cNwDwHUycGKJsNaS3H6tVuSUVZQSQ5DHt3Xlh1WLRwuGB11Xou0DwDhB1vp\r\nMUowN40QDtQ+AkpkeWsx8Lz03+IAoJVY5WdQtDA39tM6GMhHjyHXhnwDxUqs\r\notuAPHqeWBgbcYln6ZQCrwcxjMRhjO+6iL4=\r\n=jLZL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.4.0-20230209191848-0a912e3.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"playwright test","build":"tsc"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/11bcb3f4d98c2efc6d8b11a531ab5ece/blocksuite-virgo-0.4.0-20230209191848-0a912e3.tgz","_integrity":"sha512-KSIVFf+xfwDoPKcw8OCD1HmCsOXGpuZoP1FgCSGsCWtYoG/jOseF//1VPCrM3A9uL0fOd3mdXRUBYXFFVgdxow==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.0","dependencies":{"zod":"^3.20.2","@blocksuite/global":"0.4.0-20230209191848-0a912e3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.45"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.0-20230209191848-0a912e3_1675970738383_0.910081744762324","host":"s3://npm-registry-packages"}},"0.4.0-20230209215259-a294751":{"name":"@blocksuite/virgo","version":"0.4.0-20230209215259-a294751","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.0-20230209215259-a294751","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"169f8322ea8d43f9568dcdf407e7f80b20440534","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.0-20230209215259-a294751.tgz","fileCount":71,"integrity":"sha512-Dq6N2DOOXksMnkXVzH2FwMfjOdnBz5esvOHgNVccmVJz35jcMqpJeVHKUox0GNB4eBPSBoVhsqRgD+ay7ddVmQ==","signatures":[{"sig":"MEYCIQDhnToeNPP0J/zPE22nRPD+TCaYnXLWGatklK8FQDqjuwIhAJeH0emciXkpnFeD9u4lCUxKEYPBxtMfenq3i3SK0zz7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5WvzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrpLw/+IclXHqtlPW2FsZ74wHC+IcNrPhK/HJvVOp6ae79TkYcH8dnq\r\nIcC6IhNxnzZNKZGHQSHN9hLJYFbdQ3NhSUuYEmEV1xLHJjbL6zUDLASnjEDJ\r\nOvhrq3we7e3mtSFM53YqMy5s3gxo7O5iUgfqXC4GTxkkoPlXKp7MjeO+ZzAk\r\nRxRt0EceOSCRHzLcn8WNe++h94M+3DWySohYRpWaqp2a3i9uJWie5iX7Dif9\r\nPLXJA9nkkNyrnJYrCplrsjIf5aMXbOANWgxYQ2co4f9l1CD3lVxK10cm6gJ8\r\nFRHxoYAY78SDiQeP983abA1orgfqfg7nVQYN19Ny2h5Gy0rD2p90kStnTH9v\r\nu+JSWYuhdKG8grEengnW6axclFARrIAnCooYV8A9txl8yllHdLRl71Kr/1FM\r\nS8/pidZrIZl16FzyG2ZW/Nl2eQ5h4q4pjqWB9qv79JkGInQ5b7k34Eq37QGI\r\nnj7i2iBM/99TLNqybrH1bryMoPrNUO0yFgRoFWzPd2jI5tbKwpQ9RtN86mK4\r\nQBFMoXn4CiAlbnOeLFSd2D957V59mwE6tm11k/E+MSZ0hewoFXcfoe7s/nJB\r\ncDZKwMUDP32FXdGkNSOdav5qVkNyrTQnKiUA0ySDDHNJnairs4QtL+8wCqB5\r\nWomQRT6vh22qVPpxfT6l37P6K+mfN/llcNM=\r\n=czid\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.4.0-20230209215259-a294751.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"playwright test","build":"tsc"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/4e25e3c20d1e30a0b35b85a652b5e961/blocksuite-virgo-0.4.0-20230209215259-a294751.tgz","_integrity":"sha512-Dq6N2DOOXksMnkXVzH2FwMfjOdnBz5esvOHgNVccmVJz35jcMqpJeVHKUox0GNB4eBPSBoVhsqRgD+ay7ddVmQ==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.0","dependencies":{"zod":"^3.20.2","@blocksuite/global":"0.4.0-20230209215259-a294751"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.45"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.0-20230209215259-a294751_1675979763451_0.635052489910414","host":"s3://npm-registry-packages"}},"0.4.0-20230209220133-3a31da9":{"name":"@blocksuite/virgo","version":"0.4.0-20230209220133-3a31da9","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.0-20230209220133-3a31da9","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"bba69fd78fe5f52075614ef5dce6871e0053cf15","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.0-20230209220133-3a31da9.tgz","fileCount":71,"integrity":"sha512-S46rcrx7RIww4kcmSIl8kBYJuuZ2751HFWGAiSz0pLJVcwLjCbHRPcL7caUxyxpL62IkkC4bzKYhqWPGPVgwJg==","signatures":[{"sig":"MEQCIHpEFkwAub3SvPVTtR+yemd2QQtDDYH5cBT/1STebE9JAiAMIOZQLDK95U8noQEvhl+XVbgaS5sGiG33aTql2bXyEg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5Y+CACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpyWA/9FGlbFkMuoKuTTbtL2kiJQJnJFIfntmGJZNqzowQiSBDENYHZ\r\nrnGF0HRQ2Ok5Abt9XQD/T9gTJ1rqneuWYV73yOChNgFy1oIzZp5k4D0Tmirh\r\n9hm+BQpASzOXXo/yiVPWbtBKVnAUK+kmk6VDCxCCyH58lXaiQG/dS7O7EJb/\r\nH4Evik8SHqA/v4BO3j5oYOre0fSf5Cvqzx31TmoIEDpI8qEiXDvT5i9KUhh+\r\nn6+0zEychn5Mz4U9gF0Qu11/Lh0muFEUVWC4LrPWXAB4tOY1I88WXVp4mvVn\r\n4zxr7yYH0+jp9/cQxlAGi0JcJWb0BqKkzMMqouCofI9oHDJx/bpALotlYQnc\r\nMYV8DlFCUAKrJh22MGLyIIMvs5UHcUKxguMlLQlrUiSYdfEhHpQ8R8MYwlSM\r\nz62mwmxufVnPeNWW2ToAw9m7PlDTpXFvJN5fkJywIonTMNlaXGm32CvXZk3M\r\nye/yzqnu+F+z45nc4N2uW805H34ZlhvVnbNeXhzJjRnL3/WBcePE0nfkveYB\r\nV87Oupwvjy5zNspMtppZgXH8Z/aGzqCtmvyKP5l+aVBls7OukXFfa1FDa80e\r\n+gMLgPt7CsQ0UhiVIiXhJW4fi4w9d7fWLtjj1fctE4Nd2wmHaTH0XAvrxJpB\r\nhemFKBhCJfDTIvPPDkmvmw2GbAE2Zc1pCfA=\r\n=j/2P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.4.0-20230209220133-3a31da9.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"playwright test","build":"tsc"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/10c30002143ac6669a3a3a362a1b3e91/blocksuite-virgo-0.4.0-20230209220133-3a31da9.tgz","_integrity":"sha512-S46rcrx7RIww4kcmSIl8kBYJuuZ2751HFWGAiSz0pLJVcwLjCbHRPcL7caUxyxpL62IkkC4bzKYhqWPGPVgwJg==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.0","dependencies":{"zod":"^3.20.2","@blocksuite/global":"0.4.0-20230209220133-3a31da9"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.45"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.0-20230209220133-3a31da9_1675988865920_0.6440601681888118","host":"s3://npm-registry-packages"}},"0.4.0-20230210031655-264744e":{"name":"@blocksuite/virgo","version":"0.4.0-20230210031655-264744e","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.0-20230210031655-264744e","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"1de97100ddd184333e466b6af6cdb6a3dad56dc1","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.0-20230210031655-264744e.tgz","fileCount":77,"integrity":"sha512-cjG5ADQVM6HafeSoV1ym1voa04WD4fHJE887ZpXUFfj73OcU9EUAOGdjoocJyV9EzmWWeBA9QB/jMmx408v3pg==","signatures":[{"sig":"MEQCIGqp9TMHSNlAob6wrDOvdCr2PkydH1Pva5hr1m8oEsnvAiBBR+2Zo49aTK+GRkUPnVP+CPJdpuF2WbsAzdgH8ynEiA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":219971,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5blQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpsnBAAigYqIzVn6xOf++ITdp7IACITJXJUed30GuiNk8jLmvaKectC\r\nUN9ES41d97sOUWoWEeWgbcR4y3988+1UBf/7cHr9AD/JXXjjpfwKGUcC4kPe\r\nhmyXQeReF2wylTLuGk1L3cBFPhWIq6jNZtlinyqU9x4apmUHM0roM7SkpRoo\r\nZi/cl9i74sJ8Ckbx0WZw5+hgB9Pg1QHPUhY2WHBwgayDYTVfjcRx4P7EFyoH\r\nvK4KPsF9zyHVcf0xvxREjQwGjqGDn8zxRLiVoTM5VitVbwIFQ/1PMDTKbVaG\r\nmgZfpum3No3jZZkRideLKdAq9NIxBiVddMNQlS4ZInZEKitwXbjQIjWv/w4F\r\nGX3nwEjaM6WzVgeCj72cnvxU5T22y848vNQe2ceMZsklzz+02A+fIyH6EBjm\r\nxfEmIwtKRpCOKc8CLLGgwVhwDlyS2Dzf6h511RXdH2MgakC2qM7B6InHhyQJ\r\nVARlRiZv180GtT12DDM9uXboGS5+mqyjmMgWorkYKrqooaFzQDrk3eF3ymhr\r\n4NEXGam/vSeF4tLKsDMrFkSypfKLE0p4BBWUeLXrnc55aD5d6lRMwtzkoXAw\r\nJLpD43ngZCs1L5AGxHh3leW03sgYWlQAMCSGsiHMTZvqM6BeOjG1D9n3SXDp\r\npxpFedvxgyvEYXBRzYM73cabAnlVhf1Zu1s=\r\n=ZY9i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.4.0-20230210031655-264744e.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/826847b64cb85f687c251cd60477ea04/blocksuite-virgo-0.4.0-20230210031655-264744e.tgz","_integrity":"sha512-cjG5ADQVM6HafeSoV1ym1voa04WD4fHJE887ZpXUFfj73OcU9EUAOGdjoocJyV9EzmWWeBA9QB/jMmx408v3pg==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.0","dependencies":{"zod":"^3.20.2","@blocksuite/global":"0.4.0-20230210031655-264744e"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.45"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.0-20230210031655-264744e_1675999568142_0.8663233503030516","host":"s3://npm-registry-packages"}},"0.4.0-20230210193543-bf10cf9":{"name":"@blocksuite/virgo","version":"0.4.0-20230210193543-bf10cf9","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.0-20230210193543-bf10cf9","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"a2e0b9bfcb952281ffb81ec99c024dc6ea7c493b","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.0-20230210193543-bf10cf9.tgz","fileCount":77,"integrity":"sha512-pf3dzaVe0avwyHyznu72VvkcNzRZNwkXUZw8tL2HH8EJxQQ0R7NZU6fvIQAVoaG3PyxNarAiik6sKrA6vuV2eQ==","signatures":[{"sig":"MEYCIQCLNoV2xyrzy7WgGTW0Jfjuz3Zk+q2jLXTWGax+5wXfWAIhAKTa5lmvGLX2HAbAh41VoZifwyEBfce56amUe+U3jb5p","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5p7VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8/A/+OmZXv4Qe3aGeYxD7buF7U3Pwuf8fGchxDbhnXTyMTncQdDFg\r\nTZ7vVnrH+hlrQsesKyybG5QJovmJlkRv4cTuqLQuAwyyh7h7H5dEG3r7laHq\r\nsNocATnpG9+DJCNjCtEs3nfncfbKY2T22NNtleJQYgba2JNjQd4inwUn0uin\r\nia5IxiymaOoDwqoa3JOwn7ALQZuj4+GVCyJLvO3yURUNp6VfrVXquaQNdhZn\r\nAtdbStnG7CIAHKLnX0tT0xGvAZSwRyubz0FZc/lBWOK+o8fFDRvvKnaDQMYk\r\ni43dEJeDun4WNvf1eqrCoCH4TQCntHDZ/VcvKN/SfuEQlYg84SpUS6pO9Cmg\r\nuNv0fyOScxwzFkmC/bP3tbddNkWpNXgZbKl1fff3ac70rLodVniyOC5pNaAt\r\nOuuxlaGuA9t+wgyKIP7DrlnMWss1lTGFbtZ/Oo8IDLd/lOuCpFqzN3JIsBvU\r\ntOM8oFCBsNVH3eO8qLYfafNaylN9ZWe4p4G/bCjh1SORGStqOvXsctCZm5S5\r\nV5wuFliiLK+hBa+MXfZcetWBdu+vYA5zRDEGs0l6o084Jm7XFsn4QVa1TJYR\r\nQo8vWSdOjmNHtu2ANMXE0EMd8YEuD3ddH1NjC4o+gHS1Ay40rEse21mia00H\r\nkrkqWD69HBW14+36yLZQkoWCO/0eUo82ZL0=\r\n=x6sL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.4.0-20230210193543-bf10cf9.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/0bc6ae1841049ce6c292b9fb00236cd5/blocksuite-virgo-0.4.0-20230210193543-bf10cf9.tgz","_integrity":"sha512-pf3dzaVe0avwyHyznu72VvkcNzRZNwkXUZw8tL2HH8EJxQQ0R7NZU6fvIQAVoaG3PyxNarAiik6sKrA6vuV2eQ==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.0","dependencies":{"zod":"^3.20.2","@blocksuite/global":"0.4.0-20230210193543-bf10cf9"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.45"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.0-20230210193543-bf10cf9_1676058325749_0.731780935202454","host":"s3://npm-registry-packages"}},"0.4.0-20230210201705-1ce0043":{"name":"@blocksuite/virgo","version":"0.4.0-20230210201705-1ce0043","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.0-20230210201705-1ce0043","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"8693cc01e1d89bb12bc7c506686ea1d1d39594fa","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.0-20230210201705-1ce0043.tgz","fileCount":77,"integrity":"sha512-DQvb93d7M+p9iJJH9QZCwjjh+G+AUFjgSQew9kYi4fwzgLqdjpcwd5O4e+EBXTWlAXv47KA+7/OX2UGnr573yw==","signatures":[{"sig":"MEYCIQC2INoEmwSk/7BhRglcyY5hHgX/7q9ShVssLq6UvLTxrQIhAKfM1xfyNi2fEalL8VX78KBx1xzorr2B0XndWIb40XB4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5qe0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrgcw//fKLBaoP5CA9YWJC9is04BsFxqVNmYASFXrqAHYfsT0AqL9r7\r\nnmfmr54RgKYwouV80Qd7WOnFmg9vtOQbni31TioJdMfHjxs4o2hHrNpOVvSf\r\n83iWhw2PRf+ynPLV2CBaJf9LtohDk0gtOQ2uR2tqfxRtUtKujAjfIaLe+Apm\r\n7UXUJGOwXDc7UnlZNDWjWzBSGnPPjICtRv+VUEAKC3ukwqFvM5Oy9idiqpkB\r\n+PDyR1kbwALaalSWMLJH6Fmn2WS3UfDMRkJt+HBLURUaH62sax9pi/NCzLuz\r\nEtbcBkw5cihY9kUdo42GbbXGXQVksGOyVQAnvnJXsRvLYjkpkeJOKZJDDw1K\r\nmFVc04ivKRA/MlceeC5tbrnRHQOaaNqAlBIZ6wFviW9q5+SKXvjWi77aeA5I\r\nxOdfGK2Ce6quwatSbIVsPuStuG7DtrPyIf+8iU1yx5PpEg5PXazIzE9G/M9J\r\nF64/69CILym2EGi5nd6+SSQP5bSgQIzdkj70L+bIq/27v5wA7y633VKBNWpc\r\nlF12wVpKts61mVfaxbq0HgTS4EIy7xqKTORJXbYv4dugBkfdE/7XAWQ3tcfb\r\nBwmHGdvqqMR6WEpdzv7HAo+MlPlS5JsIuDXED18Gr5PIml/i74ltBrG1vm5b\r\nB/fygwb9++ZOwzoL9k6BNPfneelBcrANLQ8=\r\n=hiOM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.4.0-20230210201705-1ce0043.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/a81a74a2c2d97c639e7df6f8850eac3b/blocksuite-virgo-0.4.0-20230210201705-1ce0043.tgz","_integrity":"sha512-DQvb93d7M+p9iJJH9QZCwjjh+G+AUFjgSQew9kYi4fwzgLqdjpcwd5O4e+EBXTWlAXv47KA+7/OX2UGnr573yw==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.0","dependencies":{"zod":"^3.20.2","@blocksuite/global":"0.4.0-20230210201705-1ce0043"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.45"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.0-20230210201705-1ce0043_1676060595998_0.8664675436281697","host":"s3://npm-registry-packages"}},"0.4.0-20230210221011-770af02":{"name":"@blocksuite/virgo","version":"0.4.0-20230210221011-770af02","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.0-20230210221011-770af02","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"f771818f841c100217446682d563b8da543f6049","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.0-20230210221011-770af02.tgz","fileCount":77,"integrity":"sha512-SfLex2whidNrUOX++k6LBubBRgLU7vQdgZoSZx/3fwHKwZncupsQpQnfXIuFvohqqYrIBWywU1VnBGE93oevkg==","signatures":[{"sig":"MEUCIF/zkhrC3nQ7cf3HlxsH7bZsHdx2IVIX9LqeDMCDmlpMAiEAk7t6HNYndSgC9ywgMrnU6y0EzPsAO29OD8/UDqw7mu8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5t/OACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqB+w//WpcQzC4y+PtjZYl9u38TvQJ3jSZMsA4GOweXz7PNZ05Wu/6E\r\n005i9iwXe21yEU805nkzKCL6/C69DPhrUuvTz24sLeupzdoJozc77369MsKo\r\nZ8LUTHu7No0a7naMaBd4U1z61WoK0pYrRZvgEuYY8C/ZA5ijBL9SKsENtAfX\r\nbQJ8qyJaVgyzDIEfMg6b9Sd1aVS8kpUuGcJXHiwkWgczAdfwEp93CkjZT9RN\r\n2xDJJdFWFHZ6+mSYiE/gAr743R6UdjG5adqjy8b/MlQVqYSA6NLqwzaSkd1+\r\ndhydN0nSj1DKqKBpQL4bAqpFSjaxcVizkXZxmMciuVUVSN3Pz20fkIZxLfGA\r\nLqEvsi13JaUijaJUfA6Q6ZsgM5p16SBd11lSuUU+snj+uqydJon4/Jg2b0tB\r\n5jPOekU0kg/I2zOCO/xBg9lZjq25GC3FueR/igWR6OQCE/U/j/ipiyNm5BXw\r\nUo8oe9T5XZh+taNU20gNhcF6DPuPNaj19cWOLAhKBc1GcP4vIbCy0xKaLFKX\r\nWBUNaXLqWAGAzA4P+wM5HkSrF0zt7/KMjLJ776H/fwhNbd9Qws7UfNqybCHS\r\nZTqEiGaibpwYsyouWsjJ1rPDf1u67IdSOW6G5BDiXmQ7d+3jQxN+cbWEnGeT\r\nh/oGxx0sT8cFAr9HPjFjVP2QpN33QKSSXQc=\r\n=Vnuk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.4.0-20230210221011-770af02.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/a62e23fdc9cca8ab10a412c5749099b0/blocksuite-virgo-0.4.0-20230210221011-770af02.tgz","_integrity":"sha512-SfLex2whidNrUOX++k6LBubBRgLU7vQdgZoSZx/3fwHKwZncupsQpQnfXIuFvohqqYrIBWywU1VnBGE93oevkg==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.0","dependencies":{"zod":"^3.20.2","@blocksuite/global":"0.4.0-20230210221011-770af02"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.45"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.0-20230210221011-770af02_1676074958420_0.25423218201051623","host":"s3://npm-registry-packages"}},"0.4.0-20230211035417-55e3edb":{"name":"@blocksuite/virgo","version":"0.4.0-20230211035417-55e3edb","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.0-20230211035417-55e3edb","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"9e0c5d8db9636a1738d7ef8c1ca0e94b09a220aa","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.0-20230211035417-55e3edb.tgz","fileCount":77,"integrity":"sha512-MZD45/ePDmJcr+2LKQHdjShuboR13GU/UxP1cm5ulEWWqCVKgDAxDU7uPTqJumPC4z6kFEioCE+9GCC+O5GqCQ==","signatures":[{"sig":"MEQCIAnh/+HkkeEhtpkT1ojPT4lG+OoyUtW5N5kf9Ytc8wNXAiAVXt1Ck+AiuC+P5gC4iMVoTqjgUcWZogJ6kDfvjtEDUg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj6DKvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrHgA/+MrY8rHZsBXxvWEMnEY4e7K0FPc6jnD1M3cHT414z7Trvtn7c\r\nbH4hDeGUc7vc7Omhmcu1aktBLjHShabC4K8wfjlJctWWh8v08USgvw+0eHHU\r\ncxoTAZ6+AMK8uRht/2WB3TfHZqjzGy4owjoPVlzjSRXOvKkZ0Ha/bhmHz8dc\r\n7fLEkDzi3CmRbu0ObBSN5O2dB/f7RR++ZrBep6wpNzb6gNHyBfnGIyaC7Stu\r\nIhHKyZQUo3LfGwCwK1cydXf+dHy/ZuRiH4VuK8mKNwmzp+k8cHrY214wqx+X\r\nodur1LhviJMvMUfJrfEt5BtYdpKOJsDuGs8DZCaTErfhaKW5ZYfFQZbDocaL\r\nroW4x1mAEReEXY3cY/LxiLxmLWYEWhoQoh91wPLprmsOHdquy1JUELgnGsvk\r\nj1ErWsdRUanBX9FfSOgF7tcSLfEO1OeufNTHsEKLqZIScfs2QAVa2M6rsLpo\r\nYoTq1SIiM4zJ5ZOQ5g6igx/9afEA5OTseUOu05QfyWBGAwWUqXLJMO77kCL8\r\nWVwhERQ6gfAaK5DCpxx08O5IpqpxuVYSr9+KsUdUqigRSmANMZY4IvvMLdWE\r\nK5JVI9u5wWzJ6S35BX8yTEGul+IrsJ+dbqlZCL3EGE6RJWoQV+UQhXAUmPEt\r\njsIUqf7QA31Cn6cXMh6Qxt9RdSAMtIgE06U=\r\n=Zdmp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.4.0-20230211035417-55e3edb.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/732c59a7af9db2ee075d63c828c6761e/blocksuite-virgo-0.4.0-20230211035417-55e3edb.tgz","_integrity":"sha512-MZD45/ePDmJcr+2LKQHdjShuboR13GU/UxP1cm5ulEWWqCVKgDAxDU7uPTqJumPC4z6kFEioCE+9GCC+O5GqCQ==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.0","dependencies":{"zod":"^3.20.2","@blocksuite/global":"0.4.0-20230211035417-55e3edb"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.45"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.0-20230211035417-55e3edb_1676161711558_0.5112443860195304","host":"s3://npm-registry-packages"}},"0.4.0-20230212194855-047e1b9":{"name":"@blocksuite/virgo","version":"0.4.0-20230212194855-047e1b9","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.0-20230212194855-047e1b9","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"b7248fbf0d4e7fe7091090760813a6056a56547e","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.0-20230212194855-047e1b9.tgz","fileCount":77,"integrity":"sha512-X3teYZVXRv6JS8I98oTbz5+oudHWycW9+EOFf8eh52qEKT8+PTVGFVq1Om8Z2KifvKnUTiNV9P1ZY1nIYEQNyA==","signatures":[{"sig":"MEYCIQCvYedNMONBbG9G0S4MW4eoSDJO5Ej/LEDjqJNpfPtcugIhANec/cUdjQFlyaiFmo56lPD7o614Ic/B0PuVnoC6aj2e","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj6YPlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqmCg/+M5tjBeZGSmXp8olMQvjcSJuWwzkNLARuUVL7Aaae4KAidQxE\r\ntlycbs40OcYUQakMB36M8Alk0p3wCEu7xlk9el0NlIFtXU3lkcIoxHPOH4DZ\r\nxvB0QytH3Goj1nLzUeqjjEY3sieEeKlqFuD0k1fFolp09w1e640R+3f8Si5X\r\n7zM24IAVOobo1e6y5apRRsF2I+boZF/WuMbvXrFVt9O74Ytzt16YnnF7RDCc\r\nuk6onjKGi4S6obpAT1EJBaxTJ7euU/QiHIQyho5QoxRTM68XfD5xHeXzsB72\r\nPCKE4LQ0Rije+lmLiICy6BU1RTpaxzei1JFJ38hv8wq+w8s0l8y1WPcnQnra\r\naOVPNu3cOHUhwhlUQAFxHjWfNc1b16B1q/jzxlP5qgAyikRKeVCAn7NfSUB/\r\nQF2EmZhisKKxt7mjUAQmtGTt/almKzySg7wiA1FuPTGbWgzQNK+ToEXUDEXF\r\nEFTKVq6DIhqI8uFwkzIID50L/EsoMc2YeeFx/WUEwLlcj3ijPuhs18GMiEa7\r\nt5kdBYcfcSNyPLyEsoz6gs3x3gSFf+IJsgO8ygESG01rcPrWH3W0Hgt4h1+X\r\nbBLlclZDzQERh6KX2CAEOpPH+g12x0EM9ZpmndLs9Co/SBwd167E1OILaOBr\r\nBqd/cNuifnxJyj8qUL7NiOXDUAtknpFy5ow=\r\n=fcor\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.4.0-20230212194855-047e1b9.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/5641bfe804403d5335945786a876fec9/blocksuite-virgo-0.4.0-20230212194855-047e1b9.tgz","_integrity":"sha512-X3teYZVXRv6JS8I98oTbz5+oudHWycW9+EOFf8eh52qEKT8+PTVGFVq1Om8Z2KifvKnUTiNV9P1ZY1nIYEQNyA==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.0","dependencies":{"zod":"^3.20.2","@blocksuite/global":"0.4.0-20230212194855-047e1b9"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.45"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.0-20230212194855-047e1b9_1676248037005_0.8898852033083084","host":"s3://npm-registry-packages"}},"0.4.0-20230213234455-1a23f69":{"name":"@blocksuite/virgo","version":"0.4.0-20230213234455-1a23f69","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.0-20230213234455-1a23f69","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"b26b03f73a78dd0621894ada9c9b6ef05088055f","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.0-20230213234455-1a23f69.tgz","fileCount":77,"integrity":"sha512-JhYJT650I8IpFcDJKot8/ImbC/+1Rd8Lk3dAE8YFEukvMVbeygwyCGMey2qETYsUStTk9k1FBHwbN/CFEpCfHQ==","signatures":[{"sig":"MEUCIEG5HNufULNYUSuZl6794BzMLEArAC29UjSQBNUmH00TAiEAjjAQmnVhR19u3m6n4ueFhbp1pa/SbcEAVVxgyoHJaZk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":236928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj6tVUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQjQ//WRLaORZIqhqNEN85fH3ltiJr+k+EWBBFqD+fbHltOdgUgT6v\r\n30yylQnIJRo+dcdL4C9pf52I7hvVuAxjaSyNDcO0yUPVxmkVCniQjpU2zgQV\r\n8TzR22WXvTglOzTYwLeaSbRXv9Ng7b2Sof4UMKL+4VWgbZZAP8p3NYNJQvaz\r\n+7as8nNZNG/RxT5beBW1hAmUEnDmlVpVeh1/WHdDoefGUXsQ6c+lHOvxKPAg\r\n5pKvUiJIvnzk83hkGMytrXTF8n3/DIkf8RELsBeOA45WCmSk6/n+pZDOoxfP\r\ny9l5ANHTU/3/DPqmCW395pDUh4NMctmVa/E1pp5uSwYnS6MkdaAlih/tQhrI\r\njcAahen1mj0+ZKR3VfnsCveQACEox+5dfP3BtDl7yWCPOuib942Wz7SETR/O\r\nJWaHeekcFOabptEtv2ShvVdGK/6VRohxHBD7TKQEvSSJI7fBIji8dKuS8qKm\r\nP06dzqeJEgZl16SqQUkwQ95wMgI4Kg1b8O2KXxayKLAOwCMB5cF8srAoy3fW\r\nMdbZnDEflDON7rKwc1Nzx7mwt4Hg4GeyyRUkzMt8b4TrqnZKlQWnGeXy770c\r\ncRX+BjEx4oSr1IKVGxCfe7VtVXkZYPdKGx451H/Fw80DdJK3LXPH1jGqfNBy\r\nIDkX5zKN+BYCu/4rTJUGALkGD+y6fmwL8IE=\r\n=kvN2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.4.0-20230213234455-1a23f69.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/c60ad22bb693df29b0a69853b15d14b0/blocksuite-virgo-0.4.0-20230213234455-1a23f69.tgz","_integrity":"sha512-JhYJT650I8IpFcDJKot8/ImbC/+1Rd8Lk3dAE8YFEukvMVbeygwyCGMey2qETYsUStTk9k1FBHwbN/CFEpCfHQ==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.0","dependencies":{"zod":"^3.20.2","@blocksuite/global":"0.4.0-20230213234455-1a23f69"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.45"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.0-20230213234455-1a23f69_1676334420664_0.7082057103305075","host":"s3://npm-registry-packages"}},"0.4.0-20230214234726-0f75778":{"name":"@blocksuite/virgo","version":"0.4.0-20230214234726-0f75778","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.0-20230214234726-0f75778","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"b4312e4d482b69bf7aadd21bc0a618dde3ede412","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.0-20230214234726-0f75778.tgz","fileCount":77,"integrity":"sha512-TloHjuWpSLPxBQle44i8s1QRw9XcxhBx+GyF3XMQgSSIS/tTr69WGBR40qTh8I6HeQTxkPvBEiScp0I6fpexuQ==","signatures":[{"sig":"MEQCIEcJw1GM73yMAQW4K8Pqe6VR1Ayo7rKBiGzzIZFcHBZRAiBF8tFyk03Zy4zBxR79/hMHF0gGenI9jGP6BlnJB1vv7A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":236928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj7Ca6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo7Ug/5AeeqJz8WbPYw7FwI/tsuU3hKGC+zyIfjZiEVUPMviPRaNFvL\r\nf8f3Kntfjchpwv9mZSjXh+cp2hXDH8JmpKYexZQgZbZoUxh1Uny6YRhZHW6Q\r\n6iTXoXNOq1KELilQIA4NRn3RLeXIk36ZEog23EZmH6yM/RElhH/41Xyu+JOZ\r\n01XZrAEuH0RNG7s2E9DzGycnxBI2f1W5PzfKUMBBYfeUVLxO6KnFen90QR03\r\nzLTbQWak13dU5m8JNujHQpgjDqZxEEZH15EYDD24IAwL+xoitnZKj+purtmm\r\nf2qSb7Qq4jvVNp/JqjAdskRLsTFCtpoytP+5WNhJ81sgx4yxTWgjq+WQ4qOM\r\nS2QPKkgqBSKuNsP+5pLSbwLGuRonKu4KDqw7ajiI3MDyCnbQy47H0zmmBnLZ\r\nQJvZiErxzeJXGbVojPk4WWxrm25uzMa2brF1zd3HNYlTA8v9Vr4ISIFgqjut\r\nb7cb6jWtFWJwJy9PFDWAxKELysgIfow9lMKdq5F0Y78bELwGBM+nM3kqRUX5\r\ncbuGWfWr1d+GnzB2K4gdLN3Z74odOBwmHFmLysjK86OfS2+TZO8sxTrPyr1P\r\nANgXv9lHzMHjkQ7iovitPdYw+gPczZIA5BROJoctPBtp/a12UZz1uzqu3hE1\r\nLYI0iN1buiwN4ZRdZHpKGJiu7ld9lvGSrNE=\r\n=Kmdn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.4.0-20230214234726-0f75778.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/8421172215c242e104837be0b6862d07/blocksuite-virgo-0.4.0-20230214234726-0f75778.tgz","_integrity":"sha512-TloHjuWpSLPxBQle44i8s1QRw9XcxhBx+GyF3XMQgSSIS/tTr69WGBR40qTh8I6HeQTxkPvBEiScp0I6fpexuQ==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.0","dependencies":{"zod":"^3.20.2","@blocksuite/global":"0.4.0-20230214234726-0f75778"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.45"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.0-20230214234726-0f75778_1676420794712_0.5125516198793894","host":"s3://npm-registry-packages"}},"0.4.0-20230215160945-c645720":{"name":"@blocksuite/virgo","version":"0.4.0-20230215160945-c645720","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.0-20230215160945-c645720","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"717ba4a45ea138d181924401fbfafcd7dd4d02aa","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.0-20230215160945-c645720.tgz","fileCount":77,"integrity":"sha512-KiLyCB4jD9GMXuGopqIULq8JeNt6SuQp5KxG31gbU9ZSP9Mqpe2Wm0CQZ9Riww1P0fWz/ISyF9e29ev+daVyhA==","signatures":[{"sig":"MEUCIQDnosvPhGjEewkXL8ZYBbL8NvYPiQgllPbmuARbO6PeKQIgJUcuGTSbcH3zwRYW97W9a+nhZjWojS3XRJpmWQau4gA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":237231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj7Q4YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpSXA/+NPGywk9r+LfiyInsVyOR+zt9E8QzSu+NMqUEFFZsx0iveSYr\r\nt+C4JXrrvyFRCFTPiwSc+RKS7kD0+uWs4c+S+g+22X6ujbnVPxLhAjh9n9+X\r\nhxA8lcTV/x5MC2uozHvPM1Xdjo4JSHQSNWLKabyZIEs+9kUF2X8j+qP5OBfv\r\n5Snuy3C/nE8MhNSXodBrVXASYY1QRlGlaphuJtQmLhGZ13VLTsv5biznBR85\r\nHdEcmctAe+/2ZVr023BzO8h5n9e33osSOtyxbhNpDwtT9G4LhTY93lSbgLmx\r\n8GjGN4J6eyYRBt24Rr2ECIBJp0S9xGb3fihoqrII0SK1AAMsTvYLkXiKJfXz\r\njgLglud+3k9QsibTLkwr+g48xeYnaAyRWesKQnv4nt6+EV0GW+gM2JhvPdxX\r\nhC1iRZRDyByAbuHO4eBLuF0BdyPLy1KMvZhfxgLuPwBz/l6E50v4WJ48sQ8t\r\noNeOT2J5upWhTGcvc8SlKX/OA4xJOPGcsRVm7Xa4KvE/De/lmu6WChvjm6VJ\r\nC05aLM1yEoiMp1D/qfBRPZmhgVrultu1RbbCNV3BFx28iUbtzyLqP00uLTvV\r\nuhcUmyn5ighJnnHPdTAkVJxiAby++sWys3DySAA7ZEF138cqwyvaOBtB/ctm\r\nJBb4RD4OGRtsOkcstEs5sYaBjYY6Yo5KpVo=\r\n=OuNn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.4.0-20230215160945-c645720.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/50fb2823d95dd6d75ffac52031451625/blocksuite-virgo-0.4.0-20230215160945-c645720.tgz","_integrity":"sha512-KiLyCB4jD9GMXuGopqIULq8JeNt6SuQp5KxG31gbU9ZSP9Mqpe2Wm0CQZ9Riww1P0fWz/ISyF9e29ev+daVyhA==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.0","dependencies":{"zod":"^3.20.6","@blocksuite/global":"0.4.0-20230215160945-c645720"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.46"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.0-20230215160945-c645720_1676480023997_0.43982738012181133","host":"s3://npm-registry-packages"}},"0.4.0-alpha.4":{"name":"@blocksuite/virgo","version":"0.4.0-alpha.4","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.0-alpha.4","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"c67c73fca41917058fd31d404da31eed9ccb7a94","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.0-alpha.4.tgz","fileCount":77,"integrity":"sha512-Anz+QfgubY2EYf+zQywofgc4XN7Ejz78/JKcwl8j4ZTne9TsTj0mK5ymBOw+PhhXqu4Rhr/UuEqKzl2wHOH2Fw==","signatures":[{"sig":"MEUCIQDrotFYhG+UmV9VUUhcQEhYQVTVokArf11WPJDJLVlJTQIgK4CJYbAbFzBAtTbxgcIVbqNP4Wuk4FB4N2RkF/qOGqQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":237201,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj7VItACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp89w//ZT4bLsookf+KzTOJBK1QQirhRhINV215Hr8gTd3zArFqRx9K\r\ndTL3YelheL0nUno3TvoISlNcLvBFZfBxL2Y6Oy5aqTMwgxdwBGTWaG2mdOWm\r\nq798pff7o8fM3xU+aENVrwcvqSEN+QEisn3D7nlQAjUvLg2EoMsE07iEVuoc\r\nQSRIlfIYAjj6RPhI6S6ZLF+bHsdnV1c9g6DiRJITPVgD/YVqrBioHLWsm0ny\r\nhXYTU9BOynDidOdTEe3hR5Z33IIUVoV4M4D/Z5Zsot6AsUS94yBD1ruJ29RA\r\nooG6rpuXofIlgf7ZprtEQzzdkf1PhA/F2Clr4sPUfvwDXHtFKHuKmfxI5FqT\r\nB7Rx1QdcUIFxS3RfN44N9mDG1ySrooLtj9gCZTzRA8BYQ1GQdeZo9htDGx8w\r\ngMIyHLhrKOLo8uwHDzc4VPvfqrEYTCvx79n10ifqWYYDTCmzF8rmdaDyt2vt\r\n5DWIEvNs60y8rNZs4S4NI+170L3uXpNztyv1ulXW9LiioiNg//jNpuiI5nDP\r\nVrWympkkyDCQrmcOOsGA5q2XU/vMB0TYXFrCPkxC9Xt2OorbFRZXx1l5halK\r\nBpjCHNhCoGrCtm/EZpWw58jV3G4ii+GxatTaRPxBxUFU1pySEg6apDfQ1SX/\r\ndLk6gFH7jYg9QdO8J/RNqzlspLzwEZ1MnyU=\r\n=LxOQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.4.0-alpha.4.tgz","types":"dist/index.d.ts","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/365eb589103c96e9276afc1a11200dcf/blocksuite-virgo-0.4.0-alpha.4.tgz","_integrity":"sha512-Anz+QfgubY2EYf+zQywofgc4XN7Ejz78/JKcwl8j4ZTne9TsTj0mK5ymBOw+PhhXqu4Rhr/UuEqKzl2wHOH2Fw==","_npmVersion":"8.19.2","description":"A micro editor.","directories":{},"_nodeVersion":"16.18.0","dependencies":{"zod":"^3.20.6","@blocksuite/global":"0.4.0-alpha.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"lit":"^2.6.1","yjs":"^13.5.46"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.0-alpha.4_1676497453430_0.24450976359109555","host":"s3://npm-registry-packages"}},"0.4.0-20230216001322-62f9206":{"name":"@blocksuite/virgo","version":"0.4.0-20230216001322-62f9206","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.0-20230216001322-62f9206","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"b2797cf24b09765e0cff5c7c49b4ecbb84f17bcf","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.0-20230216001322-62f9206.tgz","fileCount":77,"integrity":"sha512-aHqdza7eQifsWy95Sa/k7gDQADE7hfNgIYfitCfHD8yyCKswNNIWp+mzaa2aAdjsVvIfMP+R8hVFxpBLrPw0ig==","signatures":[{"sig":"MEUCIFER0d5K4Pmjtqlo5R9Ye2t1cHRwuZFjKNcEhiNWPK5oAiEAqlRfWTi+LRTAONLXpGTCWUu4QO1oGT/wZIEvq0vVMC8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":237231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj7XhgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrq/Q/7BXTw410JwTo7C59FzuiEmgENXviJNrcbKInnN3veEYz4T7Lz\r\nTV8GW0b/6O4Px0oSNwAT0zkIKJgoIlz9oqjk5QY4zKv7L5ZXFJ166j2pkAd4\r\ns9QlvYUsXbDa60MORob1Lv2OVG9GNKSkkI9MTBaYrJSWXXvvwaaJElsRKDk8\r\n7WlDYl2H3fhf6+oMeraFjKpkSpUvsHjVvtTq+N528ZxmVYy05LxO9DP9DI8/\r\nCxu1QD/Eb9SCM8qoa30CJ8QZC4nRgetct8/nLe1pDyTZbxXU6TAXKA2aF+VI\r\n2FEJt3TF2YfJVSm9F1Pf/GC47BdGMGGtpezbKwSshueT+PSPx5bs76KKhnBi\r\nNnEnAIFqMRfLBwAb7joJTDz8HJ3Rz1PblFPL/NoXgAbVTJwkPqLXjyzdNU+G\r\n1guAEtIHjT7eKyl/+zm8IA5+KUEp15+u967jaIcf8d8YNNjUwMAkB5oVdYQv\r\npsEjJWvzc/Ws7Ld/IqAZhfEfAz3jR2q2Xy4MFJrHPKey5hvNdg2ZbtkqjhV0\r\nRTosC1TUzD1FiA6JT8XrKKwyxrQexvm0lUbKkzC0MAJxa4hf1mmjBH82nzcF\r\nrUdh/t272OTg+KVJbyKAyMm/gJLIIW+MftlViUhvGeyHZns6UaFWP3ggnyAj\r\nzMIL4YoCDQmi70VcAJbH+nFhdNmZ5SLpObQ=\r\n=UNxW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.4.0-20230216001322-62f9206.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/13858d80b078d176eb5db8720961b980/blocksuite-virgo-0.4.0-20230216001322-62f9206.tgz","_integrity":"sha512-aHqdza7eQifsWy95Sa/k7gDQADE7hfNgIYfitCfHD8yyCKswNNIWp+mzaa2aAdjsVvIfMP+R8hVFxpBLrPw0ig==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.0","dependencies":{"zod":"^3.20.6","@blocksuite/global":"0.4.0-20230216001322-62f9206"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.46"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.0-20230216001322-62f9206_1676507232185_0.368331155276181","host":"s3://npm-registry-packages"}},"0.4.0-20230216011811-2776d93":{"name":"@blocksuite/virgo","version":"0.4.0-20230216011811-2776d93","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.0-20230216011811-2776d93","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"f43ad23488f7af6a728d2a70831fe07dd669ecfb","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.0-20230216011811-2776d93.tgz","fileCount":77,"integrity":"sha512-R0jIeVa0LDw/ZGFY7X354l9F+RUyGOA8vq3RKttNIYK9pueBOdNv3yqavj/FQu5mGMX9v4HYm9AoZLr6dvWQ6Q==","signatures":[{"sig":"MEYCIQDTBismxGJKAZrxlC7fg/75uQMpIewPGuLt9XhrnDx2hQIhAPc+Jr2W03z9f2etGCwlHrndi+pDq8NxRgKaMXdVmTBg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":237231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj7YgtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2+g//efOfrqx1Tub+o2EaMuX6t4W2ShGzA3h7VxV3k5QTGEyy7dwf\r\nZoUhII3Qkha1PKtc9Bim0dEOky1nW9oxKzWjnxzWJ2+L1l6RfWTtXwv2ojci\r\nj0C4YEuDPbz2mx3ypOb+gBNNevgbqTNNit3Vg8AGrMy5FwjQ4bcS7XiaX1/N\r\nrByXp/R8vGleyeIQ3mgcoAplA8Yv9px2iNC+XLBRBN18dK7oMijCEJHBNMgp\r\nweHnaBCtInewUjRtuLmved5LplK4ao0tZKgemw9ICRbUXQTR61N395lAGGJu\r\n/yi712ZvwxEKVcs0FM4q8VjZ9If+ami3YuHWw1esu8QzrMG0fLrdjxW5kimG\r\n4nziDWPRcHoGxxhiObp3tXNr9TZ1Db9shX63/pYes99ROSrTkVACFUlJ7ocY\r\nieRcYokCOV/SydtBMc6dbLu4s/FBowB58sgqyoFw5JHEX7t8jkLulJMaboRl\r\ndqJnXSXTo+HNi+sueKQU2jJyd+O8FTONOpXs3cu2k1ZI2o4XmUvqMOdvS6BE\r\nREoSy8a7iSS1BIxUbS0i73H//bx9bJ0OQMazmK/K5vs4ccxs/hrTyNMCq2Rb\r\n5JSBux/P0JNNHsuyXFwO/mTFrHYZQtdbwdCGGtfH9xWB1U9dRMQmDfpszkrs\r\n3ry/qBSPUApp5tRQvznXC2tEoYDgWnrqIj4=\r\n=BZ2C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.4.0-20230216011811-2776d93.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/f81a43ff2613b0812c6e721a4c36f803/blocksuite-virgo-0.4.0-20230216011811-2776d93.tgz","_integrity":"sha512-R0jIeVa0LDw/ZGFY7X354l9F+RUyGOA8vq3RKttNIYK9pueBOdNv3yqavj/FQu5mGMX9v4HYm9AoZLr6dvWQ6Q==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.0","dependencies":{"zod":"^3.20.6","@blocksuite/global":"0.4.0-20230216011811-2776d93"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.46"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.0-20230216011811-2776d93_1676511277370_0.11713179644882254","host":"s3://npm-registry-packages"}},"0.4.0-20230216093909-90a4996":{"name":"@blocksuite/virgo","version":"0.4.0-20230216093909-90a4996","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.0-20230216093909-90a4996","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"8914eca9eb191c3f0397c82ddbf46d697119f308","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.0-20230216093909-90a4996.tgz","fileCount":77,"integrity":"sha512-DmLHtaDvRbTbsmbZSlNhfAw9DTY5NJKC4VID76PyVo8kx2i7UBOMkZX3mFllUYRKVPgnZ8PmriqADg+j+BENiw==","signatures":[{"sig":"MEQCIAD3UXBAKr2X7J7ig4k3cj2Nl5XCdUaja/10Ee81nogHAiBB51cmDGrrGxOXtzdaSzDrkM2wqDgtirD3evmlDtettw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":237259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj7ftuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr/BA/9Gim0xYpQ6UGKVI1Kc25GnAxQHQsRxSJoACJFmwB13Guy1H5f\r\nR5sCXSpPx3uLBwGcoZ6zbhrQ5sd5hncsB2bvH7Y10PzKo+tgC92jWwExEVdn\r\nNzzjEnSj8W2sANf9ZV4vUQArQpCdM7E3LzU2qIgsX0LAhrlYHQ8c3rUWaShU\r\nwCZGwDnjITHgkZwy7HIn1beuxb9WnY+uZ1ObwryehfRhKYgnyfWS5+N8kQ3E\r\n/pQFCwMmNA/91xI3TMbobYByybGiQH7dh5PwCJOQ/B3UJN73Xcw+kYSJ2Vsg\r\nR7OhinO04fZMEGNRI73Y/k+Ypu3kj265aGD6SenSuSdTyWUpX9lnMXMy1/y5\r\nxaGIdD3g5k9MI3Rzkm6Ex7nvOID3KxSMILIDdBPvk0OoVBhN9XU3OyTvQcCC\r\nBTL4kw1NoigVqcE+e2UDctjSJXVmw1Sv+LOzb8wJCv/EDCXw74w/GTS35E+8\r\nx/icLIfqgwEaR0gcRRlr9MXAsNBG47bTQvma9Vo4T429Heyy15qIk7d5MOFZ\r\ntfOGPQt3CUrV+ViOq44KRVcJxMu/P0XMEL11q+2NVi+3kuNAdhOXAzt7xGmw\r\n2D46h10egjlX+3xLNT3zUmiong1jLHaB3/zbzuvZA3YQvTV8TmRcTr4zf180\r\nK7HrsOLuhDYr++oISdSQYtNtGUqMvTKSbak=\r\n=0iLX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.4.0-20230216093909-90a4996.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/b2710393e6ab54b0871dd11f0846fa3d/blocksuite-virgo-0.4.0-20230216093909-90a4996.tgz","_integrity":"sha512-DmLHtaDvRbTbsmbZSlNhfAw9DTY5NJKC4VID76PyVo8kx2i7UBOMkZX3mFllUYRKVPgnZ8PmriqADg+j+BENiw==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.0","dependencies":{"zod":"^3.20.6","@blocksuite/global":"0.4.0-20230216093909-90a4996"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.46"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.0-20230216093909-90a4996_1676540781824_0.18068070356173482","host":"s3://npm-registry-packages"}},"0.4.0-20230216201306-ed1c8f8":{"name":"@blocksuite/virgo","version":"0.4.0-20230216201306-ed1c8f8","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.0-20230216201306-ed1c8f8","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"808fd582d5900c92d521cb2b4b5dd3992566fbf1","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.0-20230216201306-ed1c8f8.tgz","fileCount":77,"integrity":"sha512-0fXjT3HiGMypQjbbhMmjwaTAdFBpiVoqZ52xOpWrPSsDJydSowJJVlmcXcvFbXU6b3R8cvjOSxJsgZBoqQWHCA==","signatures":[{"sig":"MEUCIQCyd15UD7h+oCRio4CgQX+dYCCwie2zmQzHUsUzjRtZOwIgJ8uVh8kbhMahWydkcoEiBL67R1AwuSs53fp1HePS08k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":238762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj7spRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqO8Q//Zas7sknBgQuK+7/gPl7v1kDiIV17qaJM/9PnvcXNH4j+HTKM\r\npZSB2gHyaJiXqtuQX59jlPYFnnJC446cjEpCtdrvhnrdzEoadvjtWhfzWPLi\r\n+2vFfAQ/413YJWEj7v2LDRenaMoPgorZbs9bamZgZBG67hlu9jSHJm36V65m\r\ncqsw2Jesk/zGI27Obqur1uFTpRjU0ElEJ2Vd5lQItR8a3hAtLL8rkpdMMkdW\r\ncuhZXq2HXM0iJxVKrOFD/JYtpST+eBreoz9d/jWAuNJvhGA6tjujE0IeU2fT\r\nIVbqJjCYs8oAHosj5iMj6MJqTYc+zbf27TWzeDwVhiHGmhRnrEIlWWcKjr+w\r\n8Vj/UmE7HssKc2eFlmZO8rM1x6sUBgnHJfRjndppLPV5B2iIUZLQV4MzVYXl\r\njRAGjN3eOU1NNsm67hL7t3zSs/OATXLD77K8f1ZNLnb83zFQpxKUrTczd94f\r\noZt88PRBGPfJhxN4y6x6HUv13zxfJQOe4VSWlQztYZnvvWXLu0anlUv8iaYj\r\nYydQb/aJN5eSjByYby9xbQB+vKdF5Pfr3lJXO598s4sgv1KrKAY1ENk/DFT6\r\n6IKSdlEKZSy2qM82DfOcXiXnuAd6ppdu0N1pl2UYszZXWby+pTwtU1+mdK/o\r\nr5iNjpJTzFUdNVCKkM9HrfHLSzRG3ZkHK8M=\r\n=zMMB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.4.0-20230216201306-ed1c8f8.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/383658235b7571434d838164e100b837/blocksuite-virgo-0.4.0-20230216201306-ed1c8f8.tgz","_integrity":"sha512-0fXjT3HiGMypQjbbhMmjwaTAdFBpiVoqZ52xOpWrPSsDJydSowJJVlmcXcvFbXU6b3R8cvjOSxJsgZBoqQWHCA==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.0","dependencies":{"zod":"^3.20.6","@blocksuite/global":"0.4.0-20230216201306-ed1c8f8"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.46"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.0-20230216201306-ed1c8f8_1676593745523_0.5156771697178499","host":"s3://npm-registry-packages"}},"0.4.0-20230217091523-862ef96":{"name":"@blocksuite/virgo","version":"0.4.0-20230217091523-862ef96","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.0-20230217091523-862ef96","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"5c93c16a1a0a9e3fd436b1959cf3ac78a2991365","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.0-20230217091523-862ef96.tgz","fileCount":77,"integrity":"sha512-zlIbOTFH4bbhfiqkpMurSeqDujBMdijJqQdi5lkKqLz7uKOcA1nLCoD6r8pe8rdXmXJQvAtQlgG26WXb+b7kwA==","signatures":[{"sig":"MEQCIGtyGLWlrOJei1S/2a+VCF9URUG3TOaNlhlRwbpNbF77AiBhjOC4hrbllX031uksRmDvrwI7JNS6GtDGxtiRu3bXXw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":238762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj70eTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrD5g/+Lus+x5uE8GiOi3dqm8ikVnBK9LKPPqiIR2XAzHtwcFSXPDsb\r\nwcKKhufwAd0HP7gQxidCPLqdz2UT2dl/1EzmQKp0FAOpaoSv0vKR/pplh8qc\r\nuRYzeg3cKbmS8P6vFmKdbAcWDHhXL+2ZnSDByRhMl/0lGKOtv8s4NfYgmuEm\r\nFqrXv+xQ30keECF7X5vrpN5wUnCs6slL8M+t8qi5B0oayEH/JO/tmdRo3lvj\r\nCniemTTsLUu0iLeXHUa9sDlPJlYCE1nQaa9M+443zA2gdznpdMHTfvk4N+Nm\r\nB+/X/rZk9k2+4Z4gUid6zZByTUNwUHqM4W3qTnHYhapEP9SIGWtuMLepV3CU\r\nKaREa/NziIuy5xz8zb95kmMV79KW+CB1586ysXhdFVLHhepCogcg92go9xNh\r\npLxyNCEuoSYZxQLIZM/1jsZqFyURLPsqimJCd9BVemjOT2dqsR03jJF1ooih\r\ndaewK2T1UxJ/f+LOr475Dj6tbgx6GU3v4tQw8tXIWm/rqeonKwWofZw01rKp\r\n9g7HTJ7bnbcxgxCPfO7IpEk4gO+07O8T9xjGQMCn51DGmSSkfyukJeuezRhA\r\nXejjcUIdKTCQ/2+wH3LCVBpzAf+to1WYRTBREC1DpqxHTEk3ELQnfxlonPFw\r\noIILf6j9nw5qA+s6vmtbqaHuTiAG37g0T+o=\r\n=Tb0n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.4.0-20230217091523-862ef96.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/718e0c72009d59ef1aab39a67728fb92/blocksuite-virgo-0.4.0-20230217091523-862ef96.tgz","_integrity":"sha512-zlIbOTFH4bbhfiqkpMurSeqDujBMdijJqQdi5lkKqLz7uKOcA1nLCoD6r8pe8rdXmXJQvAtQlgG26WXb+b7kwA==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.0","dependencies":{"zod":"^3.20.6","@blocksuite/global":"0.4.0-20230217091523-862ef96"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.46"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.0-20230217091523-862ef96_1676625811101_0.7208215486199421","host":"s3://npm-registry-packages"}},"0.4.0-20230217095654-a561b36":{"name":"@blocksuite/virgo","version":"0.4.0-20230217095654-a561b36","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.0-20230217095654-a561b36","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"56fe4569b7a6ff769096632a47e8af8d9b7a35f6","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.0-20230217095654-a561b36.tgz","fileCount":77,"integrity":"sha512-duJN3+nr+QwhTsnyU+CA/b5uDptbLmp/WdM5NjtGScsYz9/a1l4pnOph1fOF04+A9squLMAMl06nnf85G7izmA==","signatures":[{"sig":"MEUCIQC4ttI13xGxSjejQc8Y7lcnp7LTnhMVhxP035+wrjuT3AIgUAm1IEvGejCm7Z9gFyKGsJlDs12qkSrBbwhCtGpFeIE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":238762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj71BmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmovfg/+PicG17rLNN4jNBuKc8TQRWLlQCGTPwLiOEvxlgqiJOLfop+d\r\nROSPiPKd2vD6NSF++dgx0+hi0xhbbOcwK45Iey0C4YNLL7ZS4iaZVpPCW4Z8\r\nWjnpIy2jxT1s13Ka/yGlIj5KbwIvP2H6ZjhjmVJ4EVrolw7ny54BDNLQF+Ng\r\nr8i9bjkAbU9CZ8ACBTag5tk5fecWWgXo+D8SqKSnHNc/Z5kUO1glmAt29zk7\r\nGWuy8GHiE/jq3t/lmdwxxGrtDDaN2xylporniztjiBKuQ6/dg6bZFv5Qie0C\r\nhOKoemmywb7McAsNANYnUCaUMg4hC7HN8ZKQ+6ACum9pt6i5Tpq9oErLp4xW\r\nU8RzkICPqJtYnQFd0uAo7aE8qJ4X2CL0tgWh1+8eDVfm7q+A/9QTBgcmh8XW\r\nT3O2wjHPXE7yp/7uKRyr/ou7s5U0WwYOoyKtjwOJetFaRouBjAv6+MLEyI9g\r\nyVhzaFvqff5O/Mlc+djF1LsrSmbQm5Kjdl51Kgw+GAXHi4EOk/CbMESEfg6y\r\nomJEJMTi/+zrg1Hy+LJ9X7MqsL/QDHG4V3iNXLfgD8OAZNl8pAnwAl58XWJ5\r\nK3vP8ydmE/n5eUE6YVHeN8w+8LHTK1hUiJkEcUM0EECpSpAuTDrDCtoO7VUA\r\nARDEbDzBdVEToAEooZa0pPsNJ1zrRFo9+a8=\r\n=AcaY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.4.0-20230217095654-a561b36.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/9b611cf558d9738c8d66c52eaac86c5d/blocksuite-virgo-0.4.0-20230217095654-a561b36.tgz","_integrity":"sha512-duJN3+nr+QwhTsnyU+CA/b5uDptbLmp/WdM5NjtGScsYz9/a1l4pnOph1fOF04+A9squLMAMl06nnf85G7izmA==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.0","dependencies":{"zod":"^3.20.6","@blocksuite/global":"0.4.0-20230217095654-a561b36"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.46"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.0-20230217095654-a561b36_1676628070192_0.062071981329826276","host":"s3://npm-registry-packages"}},"0.4.0-20230217222321-04d1424":{"name":"@blocksuite/virgo","version":"0.4.0-20230217222321-04d1424","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.0-20230217222321-04d1424","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"28c6714e96d771a556042ee3bd057f309540dcb0","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.0-20230217222321-04d1424.tgz","fileCount":77,"integrity":"sha512-tzul1CCMdvy4pR/Ih/wgNCTGejkUtGCRaHKS4jt42YOUGRxphrXz9yu4Zv04UrXir4Ady2cSItwVg2ARfXh/Ig==","signatures":[{"sig":"MEYCIQDQR88qwRTkoGh7Ffw0MDS0yZ+V+FzTZUmo+2UvSJW45AIhAMwvZbJcwG6MKICIbk22XzPkjCzE/08bHzY7ilpGKuUB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":238762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj8BtNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpiwA/+IOqIeaFrWSUVcAJHtGiv9S+UO+wxUQzBetitGiqk/WfDRNj1\r\neXhmqoj49MUWtujzZNhKlufow+bGa+TD4BtlotcWUv7eO2+v6RHfyP9LU24I\r\n6jHGB9gCSJpYuuxNoAzV8x8noYgnNHXesvBA4DCkXPUDqJ/NH1m88NQYeXz+\r\n4AF+PaZo8sSh0KiO4veVOTMfgovhI7IMEehGgxOxKHKus1GlQXAtoS508QLx\r\n+XQPC2Gsh+tr1WaXy1FPOAv3XJFHjAPOWsh2+wXERskFPpRbYbtUdtGhDm/t\r\ndg1VuBPGDZEflmtmZ9Cnz7bWtwSgA0/mneKvKjAx+RFPA++9/tNKFnKcd1cv\r\nz3fW2n6TKpHnSKZC1N+NwoC/wKkEieZnhXr7mIQR+7vCM8nluPQpjUcDp12q\r\n3f2wJ/xQmW9hdK0/5cv+T7469iV85Vcu1xxBO6/oYyLYJNit/q08vTXkFm/3\r\nFzKSqMkHPA7vrDIIgRptAE3s+sB0RcTphqiVZS0RUzd/GQgh5rRuFOwqaZ1x\r\ngMf3Y2MU72O8ZbMDBrje8olf2mu9bnogh8Zl2D75m7ZmXPZvtR+mcXaMhQwR\r\nG1e1IPq+z381RPGRmL4XIujbSlTv06LHjJ2rQmKHzqfBgh8Pkk6xHHDM1mz6\r\nO9wUwqEOUDcQP6kuSX1ASWhJM3wQjWByBO0=\r\n=EnRR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.4.0-20230217222321-04d1424.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/8828d2e4becfaf45e584fc04dba92c44/blocksuite-virgo-0.4.0-20230217222321-04d1424.tgz","_integrity":"sha512-tzul1CCMdvy4pR/Ih/wgNCTGejkUtGCRaHKS4jt42YOUGRxphrXz9yu4Zv04UrXir4Ady2cSItwVg2ARfXh/Ig==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.0","dependencies":{"zod":"^3.20.6","@blocksuite/global":"0.4.0-20230217222321-04d1424"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.46"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.0-20230217222321-04d1424_1676680013158_0.9550853696945052","host":"s3://npm-registry-packages"}},"0.4.0":{"name":"@blocksuite/virgo","version":"0.4.0","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.0","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"fd8ae9b14c107bab947d8fbf61ff47e501d923ff","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.0.tgz","fileCount":77,"integrity":"sha512-SumcVmsWxODkoZPCxpiM4D5HWxnZvhd5pjrAyaqSelVD4mi2AP7abiWRMu9i/ivWjYHYj2r1SXX/QuCKnf1jdw==","signatures":[{"sig":"MEYCIQDgFz3rc9N0gJL1Huu5bLvlobKyKA121cGqXRFK6oej3gIhAJ+lFd/I0Q9UCwN8Fc5ibwdyKmCNhsUcNTxbgEoQR3r3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":244854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj8N39ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmornBAAhOpLAyXHpv/K6vz47Sh0FZoRZeCBenDQ6RUVuiRvaMcvlarK\r\nvDvPLUBI0yQbHhdH30kgbCc7+3hTTEQcXp18ErauvxAwGIKtcDK2GqolzSaZ\r\npM7m//U69k0WXzUudUapZdGuxFS5b4q1BVJPLjHYl6WZg/AJtFmnXSAd5pR5\r\nR9YQ/YE5ystcBCbsEjWT3BA+GwbXuXUxfyLqac+HCEJJOMtUQcFj3lJ7Pq9E\r\nb+XshT6osekiaWXexhKFSF5QT0XG+wxVJ3HWc+cejYFCTI4nc57TJRujJBqi\r\ns6tfPs2+658A2j5aBeUrOQQUg4eETOxyogRIDpAme4HU+XP9dHNoS9MqGum0\r\nTtF+Sl5zErWRXusFx/HMGPBHe29s6mzQ7d3sxFFX+S8Q/XEhaNWYZjsICOLk\r\ncEqALGQYfjIa2E71cF2Ee4Zhj4yEJ21kkknsAe7nGPevD5Ughm/xCZMAgq8H\r\nonSDQYUzMqV3nISeBVtsxvtOwT2Owv0KY51mm187ZpcNNUqOTKORV3ePY/Ag\r\nENl5FTsVnRzYnvqdNCv9oRJ64sERBxEMJhS/aACKccSqLRQD2bkPLCTE0lfm\r\ngGypRyHowMG/nW4mBED0NzXucTT2RQsl9MLpPlXTKWTcdlF7pZKOGPbsZgoX\r\nad/WZkL8Bnnbxkc7G86JQrrmaMynhHUpKC8=\r\n=x0tz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.4.0.tgz","types":"dist/index.d.ts","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/af2a5439833241e4471a1365b8f69bfb/blocksuite-virgo-0.4.0.tgz","_integrity":"sha512-SumcVmsWxODkoZPCxpiM4D5HWxnZvhd5pjrAyaqSelVD4mi2AP7abiWRMu9i/ivWjYHYj2r1SXX/QuCKnf1jdw==","_npmVersion":"8.19.2","description":"A micro editor.","directories":{},"_nodeVersion":"16.18.0","dependencies":{"zod":"^3.20.6","@blocksuite/global":"0.4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"lit":"^2.6.1","yjs":"^13.5.46"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.0_1676729853388_0.18558255581172856","host":"s3://npm-registry-packages"}},"0.4.0-20230218141339-f0c5a7b":{"name":"@blocksuite/virgo","version":"0.4.0-20230218141339-f0c5a7b","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.0-20230218141339-f0c5a7b","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"877fd06128e42d119a9d42210fd549b79ada5c99","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.0-20230218141339-f0c5a7b.tgz","fileCount":77,"integrity":"sha512-dlpu7fjWStCyQVcE1xBWme3wulwh7JG5YaRRwevIH6a/uc2e6Y0n/zcl7PLnR1yBy53p/cw41DqYNYoklWLtFA==","signatures":[{"sig":"MEUCIGY7LSUxMrKYwmv9zsErfDnjWM7VZ7lrdXJSeXUbPG69AiEA9mWg3IUNjptiDjRnBsZW9XrsooPxWz49SN9+rKrV34c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":244900,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj8WzjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqfvg/+OkQelDWg74xWSqKM7gb9/4lSRsnbaEte+BWmHORlOVQnSeSR\r\nSXZEpOVMzisTToHvadTEXxYLLCZPK6Ie3h+/JKUamZE05LzGeZejktGIFdN6\r\nIFdsIBGa+95MsepUSGNqdRtLqhx6sDxlgjOldnvXYK7MlfEnd+cmuVfPtUxV\r\nJj+T4onHfZ3Bk+XJODFEyccZ9hj8ES93XAd39xIgaZl+u1btNVGj1oQi3R92\r\nWOurtRCsD1j5N+s3Wtx/9RHTxCjR9CfhDuGm68NJOUeNmieQS/WzXvmVsZG0\r\nwuhiYyflh9nqcweZEDbSllmdAdKCmqFECEBM5csRRhEcrsrDjakuyZP01VIa\r\nU7Ho3xzHa/B+dWoRIIqbZ0EKzkFaP09N0lPKHYHWAkJgULOSuxs3IYOVmtMk\r\nKW+NOoxTnVsaHCniZSgKK7nvt+u+eK4Jes2BfxCgnGZJcy/HpdZj1HPh7zMW\r\nF+RMc9IqM21Vkd8ebJhKkTaRJKz7HxyaHoa5TWkqsTYvlEuB3J1uXLjrAwua\r\nKp3BB9+SCfO/l4c9U9mhPGA9AvrFvuxEVxlXslYkgPKK9gLooaoflFMrKcnm\r\ndshUHfcqLolPNjDHPLHR64wteMCy6ry7nZKJJKPR11ixZ4RQwPHW/ues70gS\r\nzGoZNJY+6IV73ubXTL4YhUecaMplxYK8Hms=\r\n=SHNk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.4.0-20230218141339-f0c5a7b.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/1cf2b76d4532abc3a5c2058a01076392/blocksuite-virgo-0.4.0-20230218141339-f0c5a7b.tgz","_integrity":"sha512-dlpu7fjWStCyQVcE1xBWme3wulwh7JG5YaRRwevIH6a/uc2e6Y0n/zcl7PLnR1yBy53p/cw41DqYNYoklWLtFA==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.0","dependencies":{"zod":"^3.20.6","@blocksuite/global":"0.4.0-20230218141339-f0c5a7b"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.46"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.0-20230218141339-f0c5a7b_1676766435099_0.04404854139377523","host":"s3://npm-registry-packages"}},"0.4.1":{"name":"@blocksuite/virgo","version":"0.4.1","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.1","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"5241473454462254e46d36c18da3496383108e3f","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.1.tgz","fileCount":77,"integrity":"sha512-vlsGIp/kKNI4XRglD4l3w/7ozSQnaLtmXyH+rsP5jnR7/Nmbd6L6n6jK2nMYCE2RBNgiG4YqiuqWutheHsTF4Q==","signatures":[{"sig":"MEQCIDbD2S+e9TgBeSxtdJD0dK2kOWDOY89DgaIx75CnuV6FAiBZkKtochkGUuuxP7AQbtLTqaupVn/Y9hmwWdXN4vGTuQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":244854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj8XV5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqB5hAAh4W0IDL1uEBcGqoPBlKH6RZ+OAyuVtWtn7h6L5qKbrXMUNYv\r\naG+TgW1VQRbSxJ1sLGrTAZr6wqFVIvKQxxq3SO5S6bHrYRbsndSm5XShaGsL\r\nFvfvWt0lxGRDaRdj7TnB8Pa4vyOh9VWZB3YSg/r7NhohoSB5eZl1bRufV/Tx\r\nCfIJ7jvq04TDwwA+qtSlu55hZWiEPx5iSqRRWtXkH5zzHEIYn+qlPu8/NKOM\r\nK6xtL8jwlU3zxTGNDq/UZm2H7h5DRPVjivzGQh7H9EHc7NSccw2XnzE7DDjm\r\n+5AJyfjUJhXO/pZR7UjzySSeDsp3aqur2+x6D/jrsESqpDQCJPUtNQYpIrMs\r\nIaQfeVYChoCyWwCMQHfU3B4LDEu+fAPE5AvM3zgj5ZIJ7HVM2OSFej7BNN9e\r\ncMlTaJlUDyxoHec+HYwNI14a6rwDh9WsCMcFKme2MpH1/YBvXzthsgTMoTWl\r\nsMUFfQ338mvEYyTPXy+zxq7McTxtThkl9QBNh4BTZy3pds5hspW5PpZrsuXY\r\n8NhEbpo93UEu8hDaPiWKc+liCSyCh5zOzCAqzgwWybzMltB/Wrr1OtDr6Liu\r\nP47A1NpDdkpxIkROG76/bdB70fPK/iXOIjomXt89blxLBTl3MMlPgZGl8fcS\r\n+X6WCUBRwNkEFrISECahdYp+H83pXI9ouwQ=\r\n=3vi2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.4.1.tgz","types":"dist/index.d.ts","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/4a6ca22980b8a79683f11403ad68eebd/blocksuite-virgo-0.4.1.tgz","_integrity":"sha512-vlsGIp/kKNI4XRglD4l3w/7ozSQnaLtmXyH+rsP5jnR7/Nmbd6L6n6jK2nMYCE2RBNgiG4YqiuqWutheHsTF4Q==","_npmVersion":"8.19.2","description":"A micro editor.","directories":{},"_nodeVersion":"16.18.0","dependencies":{"zod":"^3.20.6","@blocksuite/global":"0.4.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"lit":"^2.6.1","yjs":"^13.5.46"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.1_1676768633284_0.4203912802457055","host":"s3://npm-registry-packages"}},"0.4.1-20230219164430-614cf52":{"name":"@blocksuite/virgo","version":"0.4.1-20230219164430-614cf52","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.1-20230219164430-614cf52","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"347ac6b586b8d2dae66898914fc90e01731ff6d3","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.1-20230219164430-614cf52.tgz","fileCount":77,"integrity":"sha512-aeOgM/RJAnvQiKl0auo7d67Adj06VVym7S9SVOW/AZ/ibqFDKIV/mYHsWMMw2GK77bY7bRfSSSlrty8pmUwzsQ==","signatures":[{"sig":"MEQCIF0wZnh1MjCxnTkHPY49IEvo1FTNtIGNLBgklhSrumxQAiAe5YlIr+iaodNfMa83WereGFQw0adCfoN13ecC1J/28A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":245214,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj8r7QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmojSBAAilBajeScjBw2ZDDlD4eN1HQkehR4lpWqg1J52gJJ+WpgfPoO\r\nHF4BQUzYtv+KZaP62BljAiOfu6WjyEvnAwQQiq1kJtZFA5bzPII73qMmfz7q\r\ndyEXTyEB3FUND9FClPGPRNqXhrIm7WB3vC+cOf2bCcNUBucq2wsJ1RXUfduv\r\nLnZzbStbqfBWZsvHe+mYLO3pD7MN4zjdI9szUbR1uKAfUGN9fAVr/Mz9NJAf\r\n8emfw4x6T/C0P24TcE0QK167xSE0w/tGGJG4BsFSe+ehbpxLppd5lOlmN9wb\r\nBue1w73rQ+cSiFmgZdaIpB3VsTurCSmnWTbZPkSpNrckefhAKtssBqtl3Odi\r\niGJeWC5hbrpi2887Fj5tl+eXQYvXdr+Whdu3YXb4TqGJjrQdpbBPIURpNtI0\r\nr8rMo65z9JOk4KmLmQyZwFOPa4mZz23sqdT8THg45z5BY4A2B2Z687/ekfsu\r\nfGvl5eWOhgkwqAOL/OxhIBgKf/GuBtLIctxMUOJZL3h9tdB7f+OsTllKiYOo\r\nliqz94A24Wd5bW/Frg3tl1I5hx/xquAm89tJK+Dt7yPaxuTdaXon7p+rZdtA\r\nOEaZ41QcbGZXyCuf667h2bwTdL1SzlMOFKF6KvF6cdpue0LXRevD9f/q4uqp\r\n/hl+Ik/jDMBVtN4NXyCrPZxlsrubcUmSkMQ=\r\n=X5M3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.4.1-20230219164430-614cf52.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/91e5ff8e43b3814cb64ca5d0076bb54d/blocksuite-virgo-0.4.1-20230219164430-614cf52.tgz","_integrity":"sha512-aeOgM/RJAnvQiKl0auo7d67Adj06VVym7S9SVOW/AZ/ibqFDKIV/mYHsWMMw2GK77bY7bRfSSSlrty8pmUwzsQ==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.0","dependencies":{"zod":"^3.20.6","@blocksuite/global":"0.4.1-20230219164430-614cf52"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.46"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.1-20230219164430-614cf52_1676852943851_0.4018163592892998","host":"s3://npm-registry-packages"}},"0.4.1-20230220214107-0a354de":{"name":"@blocksuite/virgo","version":"0.4.1-20230220214107-0a354de","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.1-20230220214107-0a354de","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"54515365e843e1c65bcab7a6a86129f259f3aa15","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.1-20230220214107-0a354de.tgz","fileCount":77,"integrity":"sha512-maMq6ED/Nh1I2yBQluaPlHb6urKdwiLI/pyMRmELtrzFdiyje++vku1H7XGwB/2yXY9pgmymbXpGfe+B8FiCoA==","signatures":[{"sig":"MEQCIAJbs/2NrtmHi/UL/TCWsAqP6+gUPZ/6wAThrJLR7Mn1AiBbx04uvhxkkOFKWd5/93rRSxbsQMkjXxrmhVbE8q/dfg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":245214,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj9BAKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrgyQ/+LFHMAlUJs8cwTMRAcP6rtvtk3qYI7cW/HPedYCgf2ctqF/ZQ\r\nqTAquH9duSWQYG4DocvVRAlSizNUfDL78hwufEJzzVyLiRVoOQ9eFXVDPDM1\r\ne4sV64Jti/v1hwyNH3fVQsqe3D+BN02smP6233+mnVLO4NYndc2X9X7ra6/N\r\neDbA77DBw8QikMY0MAZp6jKtfQYrkGX/AemudyLZzjOh2KJKQe0qfz0k3mCV\r\n1i4tqeqXZxy6O+ZXAqV0EHUmPd/Gnw0HauPTjtBNJl/xgFWtEImb9ymptSVN\r\n94vaAy/yEoWBzAFttZUsO24w06h/7Be/EUR0yfUC/gGPX0Wpvwc6Xt2w1VK+\r\nOBt3G5Ul5NRark2gIsZcvdJRRGOQCCsJILlSR2a0Ejalsd/VZmCBl468A5h6\r\ntPl67dGGKaCli9xQXg54xrqQNqosw9tNmO/uRxsRT2lSidhPLRPLCW3Ps1+d\r\noCyOhIAnViqBtuHUVBQ6e6+pR11Zqgvlgf44WjVuIWhW5SUrygokBo21hLQK\r\nNIo/aeSqrZiXFxt0dlMU+E/HydrKMuBt4Q7VjYOUc03fu7mr4PAs/InBaWZT\r\necagWlQmoCrONMV7dALJAM1KOsT5cxO2B1o06ej8MkCbRYXUs5AnMTSaKOBB\r\nEuAVSFqDJRuCoPDvclYPy94N9UUMYodjTJ8=\r\n=BxhZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.4.1-20230220214107-0a354de.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/895a85dd7bdc1545edbe0ef886fc6bbd/blocksuite-virgo-0.4.1-20230220214107-0a354de.tgz","_integrity":"sha512-maMq6ED/Nh1I2yBQluaPlHb6urKdwiLI/pyMRmELtrzFdiyje++vku1H7XGwB/2yXY9pgmymbXpGfe+B8FiCoA==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.0","dependencies":{"zod":"^3.20.6","@blocksuite/global":"0.4.1-20230220214107-0a354de"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.46"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.1-20230220214107-0a354de_1676939274056_0.08655211228700321","host":"s3://npm-registry-packages"}},"0.4.1-20230221150537-a2a8018":{"name":"@blocksuite/virgo","version":"0.4.1-20230221150537-a2a8018","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.1-20230221150537-a2a8018","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"40598e3ff345ec52a3bd922bb8fca86479b887d7","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.1-20230221150537-a2a8018.tgz","fileCount":19,"integrity":"sha512-/MYXBHaKrrRofk2YvE4wd881eL6UyRdpi5Jt6Ou6fYDrLg2/fFPRdt4dRGceuF+Tn9kAw1/lHjsq67f42xL3ng==","signatures":[{"sig":"MEUCIQCDpweaEXOgtjK9NIo86AWJX8w10hh5GLeJLcbEtXcEnAIgPolao3PQQ7RGFkapwY4lvObFMxQLpKOBwc7GK4l+CW0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":53232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj9N5yACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/TxAAixyNWbNzU6sROOk94xLi1PJ5PNxWJcgVuqQByHYqlSseT/KM\r\nY1mfm1pk9vSSOyN1SKFGq13P2k1BU+XFvl0lsgiqnEVTmxzkKbXc701+YHQ4\r\nWqRdQHWQjB92uj6pEjA8aTqh1qEj8zuclstb8A7M1KFc8rROvrn/YalQwU8b\r\n3FnlSYtLnABLzLfjqvn0l1WOEKR6+uHYeyGB09WH/dp09GZp/NnbN7kmhTLt\r\ntJI54FVDIvkCqXOLXjDXDuAZeOibARBRJaHy5VJ2xmt85FHatI0RjIwpQTf+\r\nXqgM0gcbApd7L3gek2ziqtZytR1bcf8sNJngKOlNCIr08Gwm8pATGPHyIPlN\r\nAzUVRiu9nAlD6TFdhXn5fdKZQLmSV4BfzyLrcTPyuCyekywARBEweA3th+H2\r\nE+7r1zKQfwBDEwbOuekPpBboS2Hg6Qo++BzxNQLUObmA8d5Bves3Wi8f4Z1K\r\noBFvnr8FVselPcnzt4DTisQjWMAbe7spuT9ogwLNLeAmpsDguGUPAVylTDfj\r\nlg3sNfIWV9rMHJ0jC2l++OgS68zq8szlI+pUxmIYbDRw8WCR1v3XuvlAIyqD\r\n7rXbFJ1OS3enM0FBhT90vojltZGn82/2jYaeS4LoIVrGXiHAXMjwb19FX7Ja\r\nEhBNK9z5D9lK3MsUSeWkEOmC+td6HAu9VdU=\r\n=v3Lx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.ts","type":"module","exports":{".":"./src/index.ts","./*":"./src/*.ts"},"gitHead":"a2a801837c7e922e456c4c3aceebd63a3830bb37","scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.0","dependencies":{"zod":"^3.20.6","@blocksuite/global":"workspace:*"},"publishConfig":{"main":"dist/index.js","types":"dist/index.d.ts","access":"public","exports":{".":"./dist/index.js","./*":"./dist/*.js"}},"_hasShrinkwrap":false,"devDependencies":{"lit":"^2.6.1","yjs":"^13.5.46"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.1-20230221150537-a2a8018_1676992114066_0.8169527019027301","host":"s3://npm-registry-packages"}},"0.4.1-20230221150858-a852e41":{"name":"@blocksuite/virgo","version":"0.4.1-20230221150858-a852e41","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.1-20230221150858-a852e41","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"bc98de63a899f534acb061ff70af46d8087a92d1","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.1-20230221150858-a852e41.tgz","fileCount":19,"integrity":"sha512-jYMcZeKPwQRvoP1MEUIaZ0Bhjoa5jdwLT/wnZtlUVzulwe4DX0UL2TDsx4I9uE5Za2mGuDfavMY0X/z+6HDEsA==","signatures":[{"sig":"MEUCICHUZsaDhx/YY1+Q9TnT1INWeqa4bWVGEOk19aeK9PqIAiEAnlBMrl3nsh77IJFbB0Mi1xqnYwHgwovtm/VctpQdewg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":53232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj9N+zACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmol7g//YuOLrP/sBSyPzpukJzEzwGLHftFoSoa1NvvowA94hSpmR9F0\r\nDx3L0+Ig3PbCf4RRFZmlL8XEjv2O2lg2jQbWjKQeN7Y6+2RyxgklaCg2/7oP\r\ndvQionSdq/Urz5CWd7nVREr7oL+EVGORUb3PtZ6Og7E+RNuRl48GlLT1tvJk\r\np4nVQIgxNoyptSIx9/1lKiqGrD/WmZCq7I/iay3OFmNshHGL9m7v6DPWNecJ\r\nPx0jm20kUTg+qaoX/3OgpuzG6V0tmQ7w4jL9oxjhTE9jz4jZEbznQeZymbQX\r\n0Nsd40Hyl5N0g2YI/TCEntAe0NNZnGxhKLL1jYzVsEHwGVX0J7wrhKiy5vzD\r\nt1XdbYHbZL/VQ3rFmzq8R2BCOjQNFMSaTNtJ1UTYBvP7T+hnG4lISSL8xgUc\r\nF3xwXFAlxbluPoS5pXttVmp4IUqoTMIOz88PUDzXe3j4nX4wunwDH6/dPqv5\r\nUjHySuGzJcW1WzjSOpe0MvyMA0LEE2pTO+o0Rz0W/83AgiQXt18XudxLJWB5\r\nBrSKFeD4/nbUHcj5IRL5VVv/WpLvwP478Pq9f4M3t7469bNNBKOXntHYeetR\r\nVRiJBgDkddDuE7ngy9wj/ekOvD/XJkyXlZEi0kt4mnoJoMpfZsHS5xaZK1PB\r\nSubEAtptgn64dJQsv9Ye3k7Lz65YBuNHWFs=\r\n=oMmH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.ts","type":"module","exports":{".":"./src/index.ts","./*":"./src/*.ts"},"gitHead":"a852e41ae5138cc58a6e08f4027b0dade844c060","scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.0","dependencies":{"zod":"^3.20.6","@blocksuite/global":"workspace:*"},"publishConfig":{"main":"dist/index.js","types":"dist/index.d.ts","access":"public","exports":{".":"./dist/index.js","./*":"./dist/*.js"}},"_hasShrinkwrap":false,"devDependencies":{"lit":"^2.6.1","yjs":"^13.5.46"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.1-20230221150858-a852e41_1676992435020_0.361240853950898","host":"s3://npm-registry-packages"}},"0.4.1-20230221160243-d0e05e5":{"name":"@blocksuite/virgo","version":"0.4.1-20230221160243-d0e05e5","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.1-20230221160243-d0e05e5","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"175a0a210652cc8b08516a29f282b86433f9dafe","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.1-20230221160243-d0e05e5.tgz","fileCount":19,"integrity":"sha512-bBs2O6IqyVV6Y810kevCaLTfuTAs8oxE64XH+tvpcqS6FioFa83mpfDybr0Pf9t+vi57jWJidJ4X9rTLiPsB5w==","signatures":[{"sig":"MEQCIClMkPj/elYu045wONxAEqutbaVynnoGL5WfVjW1mUPyAiB7cbqQbYn/UvpZe1N7z1QfyTOTjFd09csM8sSX9o/P9Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":53232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj9WB8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqi0Q/9FSYqWNYVWlU50C2uSc0j4GxYsSZJ3ajnOSHZ/O3HCmohr4Nc\r\n1Wh+i6JQ9kuk27H01Zh2zJBbOCuvOvG5FU+jP2Mr4ptio7e1Wy5JLIt7oBrr\r\nqGjJwG0XAha2f98+M2p3HY3g4enM/I755k1Wn8VVI3mOsxCjCcLILs+lRduS\r\n9RyxUw4PkRQqdxXkgPaE9KdW2p2EFK+qiVU1jxlyWmReEGF74DapgbQhjcBd\r\nhRFOyN2EVfa0sdRY6ZWWzSkcYwA1sbkGSYzINEc9Qq6QY8hKS+gO7mnyrInV\r\n+Kgj12pp8gifKbE5bj+zAXTivJTFVWE4UgXZuRbxGJ+mtSCwdqCDkE3Uqcy+\r\nITT3rfnKA/gBdmr61cIgx1QJX3x42+v6I4KTUsZlYkr7wUWtpakl5NSapF5e\r\nbiDUbSW/lqzyFPQYR+0cMF4CAXBKndhilgrdU1ZCrL8UzM/PTUw4eKh0bREQ\r\nhiY9IUh/YM2ebs9L192/M1eINyHJH47ZzuXTADcWztLOdh8q7rt76FVY/+Em\r\nZLFiKubSVvNk1v9+MESkxzHo/mpYJg1uWiSpEOdnmUlAhmIHMzymvHEDers2\r\nA6P3kpZasocuTvq/iVGOQB//fJa2hS5jsq29HMPC1vsc9RJY5GmMwDL4Mk3e\r\nX+qLxNq+G14M1NQtrdayLve/vDHF84j/JCM=\r\n=IHwF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.ts","type":"module","exports":{".":"./src/index.ts","./*":"./src/*.ts"},"gitHead":"d0e05e5da3623f72a952d6ba18848704afc95e67","scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.0","dependencies":{"zod":"^3.20.6","@blocksuite/global":"workspace:*"},"publishConfig":{"main":"dist/index.js","types":"dist/index.d.ts","access":"public","exports":{".":"./dist/index.js","./*":"./dist/*.js"}},"_hasShrinkwrap":false,"devDependencies":{"lit":"^2.6.1","yjs":"^13.5.46"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.1-20230221160243-d0e05e5_1677025404773_0.44013229145103017","host":"s3://npm-registry-packages"}},"0.4.1-20230223000800-427ad66":{"name":"@blocksuite/virgo","version":"0.4.1-20230223000800-427ad66","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.1-20230223000800-427ad66","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"536c1c97997dbc170da0812814495dbcea31233b","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.1-20230223000800-427ad66.tgz","fileCount":19,"integrity":"sha512-rZW2CqBblESLNdksxS6G2CEMAkh3jC8O+MMko07JCgqMqpYBuo5aipMu53Ng/D4wadDsMKXhGhS1f35hhEfptA==","signatures":[{"sig":"MEUCIQCIv31FMFe/O+KMxxzNdgQEsmhBvRlz6iifeWrCH1nHBQIgToe7QopiwFybN4rb/NBXMxrofgupsWq1WWJv0ZEpe24=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":53232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj9rJ5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmocoA/+Oe32tR3J4HzNj7suR5RbQ6pcb8IA0dY3dx5Q9lVunyP0QKdU\r\nNkA/v90ahVNT+hZsfCSPnUSE2UFEheA0kU6ny8ccZYxuE2b+rXRlfscxls1Q\r\nK2hLJy+bZLsWxAPdsP1x4uP0LV0fUJ6x1EmhUzCe9Fch52Pv61OIlY1O/KCE\r\n1UA3gLUeTuVYqfwzfXhuZJTWFkYLb4T/DQyABCCgKEkiFTkUUR8eiUtZB8FJ\r\nPZqWsbTJeXZmmOzFUHJsBS88Z2DG9heFNMaqmoKYhqWHPhJZpWy4/3ivdErC\r\nuZFJk4eVl3OY2BOMxMMXVnwmPYYVYlko7/082ihUOK5aj403PkRKe0/jZnY+\r\n6WzvS3mMm/PkWeFkKO17D6+eJRu5S7kWfWTfxoI0ZwBgGMGe7TNqr4YsvCXz\r\nFwZlwETo8mMVDxWgAW4qQM1awyVKPC+KMAmto+j20xXS4IHLrq0ONW4tcnGL\r\nPSQ+FCVBb3/ZNj+mKIcMBnISNx5xAwOlRqRpm2BVC0l3SLuEx2aR93cljSX1\r\nmK/Xufz1KUya326SZowmRqdP7Sa4CjOn/ISdUl+GU0RoCGRaCFXbWn3xIjsl\r\nhpvwyS8GNZn4QYmqoEbOw4xmEIBQ65yCvxuCTWXAmbOOAcbXfQQNpJtV+3af\r\nqa21TjK/2AHh2+XGZz/JaH59Ly7snEF6OoA=\r\n=adTN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.ts","type":"module","exports":{".":"./src/index.ts","./*":"./src/*.ts"},"gitHead":"427ad660bf95d1192bba0f20613232a077c57dfc","scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.0","dependencies":{"zod":"^3.20.6","@blocksuite/global":"workspace:*"},"publishConfig":{"main":"dist/index.js","types":"dist/index.d.ts","access":"public","exports":{".":"./dist/index.js","./*":"./dist/*.js"}},"_hasShrinkwrap":false,"devDependencies":{"lit":"^2.6.1","yjs":"^13.5.46"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.1-20230223000800-427ad66_1677111928850_0.18541782367902426","host":"s3://npm-registry-packages"}},"0.4.1-20230223195957-963a0ba":{"name":"@blocksuite/virgo","version":"0.4.1-20230223195957-963a0ba","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.1-20230223195957-963a0ba","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"96e126c3adb2c64bfc748f36a6352ffc1048ac56","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.1-20230223195957-963a0ba.tgz","fileCount":19,"integrity":"sha512-V603ltcGjakilq8HrR2AeYwc+7oiYTZF0MgHTvcJbnzE+WB1NSFLEEXxN2q77kCUbpDvMXdRp1yWNlQALiZ9+Q==","signatures":[{"sig":"MEQCIFE1NXRVUoC6922g1apbSy19XFYhrdKv6Bmss4VdczPeAiBt3T1gc5rb6DLn39uFfcnX95n+xIoN6tS4uJgiUeAlEA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":53232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj+AP1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNnQ/8DsyGgDsYbbZDblrGeATCp6UKek5JPTVq04SoewQ5ZZSvsPMq\r\nYqvVwkE8ltwwrmnPb0BoOY0rtO2NO9bVryILvMJaS19e5Uh5wgmSjTr0SkVh\r\nvPGI+TXWoRlthc7q/pUTdOhvWn7quZsyNpj/hJVHKZNNTm11FTBvUPlLG8VO\r\n12DcsbC/h4jUV7WjQ1qX8MbPKyi7xu36EjgID9KcIgciD21mnZt2ILWhAdoH\r\nr4M8kk+yje2y87vbOQ6nrwxs0f1Aal+cEfTglonwqB2FSCr/y6uaVVyizCmW\r\nvYXzhKv8BG0TDGagmlijBvaxtwyf7UU2a5Ro8Byog22C0c4tHR4qTR3LnIr9\r\nxV/MWxj53QgNzMnP+ipgZcuGlbo5euKWqnFY0EkmrNN0Z51FEY1Kzq/TmnRD\r\nsjMKSnypXEYiPwWxLHq+7a4lPoKe799KjIi4SVM+8Ix00XdKAAxn4WfDRiRR\r\nzctvPh6XQln1ReIllmnTkOmHfP9HBKoT8GDXF0fo/cQGPQ7q3CWLLXT4+Xtx\r\nuLtzbI2/Uvek92QdDgWcYZnyn7rj4hBARK60miITi65qMu8vgii//0MnMH1f\r\n3g3AkO4IQonnonoFUEXDswy80jLL2j5YWOcH8ddWR4nZcirjbCB9emzpWJpA\r\nj+BGyZpYkwf6CBja9X2O5RmkUqQIf1nZqCo=\r\n=XPeN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.ts","type":"module","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./src/index.ts","./*":"./src/*.ts"},"gitHead":"963a0ba9201f3bb31727c74d2264b85486e52add","scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.20.6","@blocksuite/global":"workspace:*"},"publishConfig":{"main":"dist/index.js","types":"dist/index.d.ts","access":"public","exports":{".":"./dist/index.js","./*":"./dist/*.js"}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.46"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.1-20230223195957-963a0ba_1677198324802_0.5625785212368053","host":"s3://npm-registry-packages"}},"0.4.1-20230224181613-0101128":{"name":"@blocksuite/virgo","version":"0.4.1-20230224181613-0101128","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.1-20230224181613-0101128","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"ce841490c7b1be49c45229b2507bd235feef3fda","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.1-20230224181613-0101128.tgz","fileCount":19,"integrity":"sha512-H5kIFMO+KUdjb2zz181O0GL8zMC8gPrWqZT4hyleTfwRRqCQxpnuP1OHPgiy2h3TmPfZrR2LP2p6h82+JhuGQQ==","signatures":[{"sig":"MEUCIQD0HDeIVnIFNjKauo/D009Ucx4wQZG9CA4d1IDC00vKvQIgePndi/cFPOI1Jp0TKZEjrxjITwMTdsO2aZnkklhNfGM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":52853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj+VWHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqmag//XoDsALhpzX5yusQjfN10OgW+uBMrO0rgeFznlqDGIj1uXO/L\r\n4RowPhGP6TvqpKu3gQ2JCOoWJ/0F/pg4m/lMFrGd5dh2sjgoWstVSN/6dXfB\r\nWxqzXYe6JR56IEqlbZD6l6ZQI3y+K9aA6K2WVNIJbOfs1Uy4Q+QV3K20mhyV\r\nPx8CCdyvIaK/gLQuzGyvrlne/k6IlSKcoID3D8wy0go1jAd4l6DPgfrsMKcK\r\nqTv7dBz9seQHHiVUVEl0BpFzrSu9gy8nAwXwxXg3cjxghg+kUGygGhJpfAjo\r\nyPLX2ajOlo5iJGjNugZjBg29wlLAY71EjrOdqlrQADvX955xgVUhh8o0Jlzb\r\nbN1HvzH5LPs0jlPaYtuZfWiaFQC7Bf4oZ+MFoG7tvB4ojBoi35ya/xG5s+HW\r\nf/HM7qCCklwRwXNaGIN+BA3G1q3GmCipWKetLlUjoulRZfCI/ftU2avHvmd1\r\nd+EHAw2mFVapPJyV2SqKJUdKlI1GqpGz7TSpOfh9EAt+yPyzdgdhYDjK1Cnz\r\nzvAwE3jeIs012DCF9pBURmvKKwZ+oIGxOrBQ9FMJQ+vFkpAHm9DQRqFZmyj9\r\nGT6/z8EcLwfCBcI4tIiOMNsosSjMfz9hXIUbfLIXpIrvo1TTT5fRdvbgg86Y\r\nIdqKuBguF85jHiCrxV4nnDGG3EzIuWD/Xg4=\r\n=yDeB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.ts","type":"module","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./src/index.ts","./*":"./src/*.ts"},"gitHead":"01011280b1278fe933810f67a255a5d2e59e2115","scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.20.6","@blocksuite/global":"workspace:*"},"publishConfig":{"main":"dist/index.js","types":"dist/index.d.ts","access":"public","exports":{".":"./dist/index.js","./*":"./dist/*.js"}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.46"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.1-20230224181613-0101128_1677284742996_0.47525032156963043","host":"s3://npm-registry-packages"}},"0.4.1-20230225180029-daf8dec":{"name":"@blocksuite/virgo","version":"0.4.1-20230225180029-daf8dec","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.1-20230225180029-daf8dec","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"9c97e0e993494d073572191ade15cf0e7ab5e9ba","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.1-20230225180029-daf8dec.tgz","fileCount":19,"integrity":"sha512-rfR4H9PYJgB5V/JhfgbArI33soWhbWYFR2/aMRgbAXE0Q6Uu3CvwF6Crw2s2U+yyTY1aOOp+DhiTQEweh9edPQ==","signatures":[{"sig":"MEQCIAfQP7ReTacgQX25baUkDFk1jED3mBUazwVq1PdpyAb4AiBGfIaZjtW/q3CX4FF7nFla7jfnmiODP9/KonUG3uMavw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":52755,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj+qf3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpfdg//VWCQLpHDxBL5lLpoicXYnJ8TG/d4efrjxWF4g97EWxl/qWDo\r\nLiyJDbEP+lC3QihSI0iNMMVzt+as1EqMCzIVUZxEiAHNRTnkQdO5VHzDmpY4\r\n3x4l08Ijx5M/7KYtp/d4oy54iepABmCdUiNn3BRzL0yVlqtIySPwtvegb6bW\r\nTy6IUOzWGNQ64I+vk7hxsWz5cANxh0k47bt7mKu/CSUABHyg25scFBE1+b+Z\r\nDUvsXLiz78coZZCjLY55IBYLiMOlEtVWi+hQj6rlj8VhWNMEj+t32s2cbzVP\r\nqp925xelj0jsxv5mxvMp/DL0bgf7/w5H21UbxboXM3EUDMaV22gWvFBaIZMJ\r\nXfwo/V5DYqnGCt2HgXad1Jkz4MPASMco+4i0nKPWUFnW2frrBtHgIPjJMbSz\r\n00LEt00HdekOYik5yVoV7297xbadqVlPWC08MxbtBG9W3xO47j19Jco7Bdzq\r\ndCAd+rNeZod/yhdHbeSgdNy4lLXSwZ6OzHa0QYhuoER4tC0HX0tyB1UXBuQS\r\neN4QFNMa5lAXngno6dmpl4irN3qTY4qCvq9tp8L+nnqrAU7et8lk0xdzNMEv\r\n4L74UmvSrr/dbfSo+c1AfHe+qBoshUGXdYucfmwUEh6Ylnj3XLxCdcj5Zq5w\r\nB8Z8fa4VQ7byhYUZWGUcpDzi6CT4HSCeo2c=\r\n=3wzE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.ts","type":"module","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./src/index.ts","./*":"./src/*.ts"},"gitHead":"daf8dec96932af555127d75d3a4b178cee642c48","scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.20.6","@blocksuite/global":"workspace:*"},"publishConfig":{"main":"dist/index.js","types":"dist/index.d.ts","access":"public","exports":{".":"./dist/index.js","./*":"./dist/*.js"}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.46"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.1-20230225180029-daf8dec_1677371383451_0.25122249554819076","host":"s3://npm-registry-packages"}},"0.4.1-20230226175811-d32fc6d":{"name":"@blocksuite/virgo","version":"0.4.1-20230226175811-d32fc6d","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.4.1-20230226175811-d32fc6d","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"eefdbf636a7ae10a9ad20f20f57092357000d85f","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.4.1-20230226175811-d32fc6d.tgz","fileCount":19,"integrity":"sha512-QO3Ksar9EFxnTYMZELpVnfDsqCif6HUIjORDouWqN8vVwJcQ4eA6gvWbKGXhELYmsQ/sbWtGXkJOmtm5oER+CQ==","signatures":[{"sig":"MEUCIAs64Yylhf2qZa1kc4ayIRyS8pyT7FxdP2vhz7JPNJQ2AiEArAQyfhntyrO1bM9rCxtOwJNpFEnHw4wKvtxRvN5aoNo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":52755,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj+/jCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+VA//bTmgHc4vFGwoSOc1t+xkOvp0aXAelfO0qbYLo4oCS6/1YCSi\r\nTkyCqQLNDHVG0JIgyeva9UVEpmTyU+kZHFwx+J4buRfuRckH39CNJhUYB/+B\r\nyUQskCkyFjQtCHX3jkMoGIoZ2rt38SR77cHjOvGi/smcibQ7BoJCHbD/2xxb\r\nA3so2IG0cCZKQ60wLmahGYXzBlaMMnswO3WAuE5IbMH7UX5GbbcPkFB7NULt\r\nsrY055N8VHIub9Ze2+Jr1uQkr1BUR1CJirxG7jOdGpadKpGGT1SCzNM0cguN\r\nzGhoNSMRErlul9pUzDBGAWyZOcvrRKjPG68Qpy22AR7N2JKQ1QmKmOEAS70V\r\n7G1mDkFS+GNm3gugl0vLGRw4hjbePT62IBtUHKN/nAYqvtf/V2D5D6VB+6Nv\r\nkw4sc1hCtNFe4bUrowLEeZQpkOI5X3uMdB9tqmbJkrN5Rzgouecv5n5T1xDA\r\nbteWLPDsBUxEFQDHiGHB1ztTwmef8Vrj0YxwFhUR4cTgPTLDw/CUXBe8agLM\r\nH9SanV0w6sK1a/f0fDdBNLl/VEfjFCJLBjAjRCRe35bVfFF0ikQXIDv/e5m9\r\nO7Rcpf+IwOYy7KoSSkwepcG0aKHi/FtU3INrnh7sNM9uWS0RDTpj3LOLcS04\r\n5GekTS4rnOVvgq0Zqyha7cskwQ38agYZAmE=\r\n=NvhP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.ts","type":"module","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./src/index.ts","./*":"./src/*.ts"},"gitHead":"d32fc6d1155906daec667a26fa2f0a3988803b36","scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.20.6","@blocksuite/global":"workspace:*"},"publishConfig":{"main":"dist/index.js","types":"dist/index.d.ts","access":"public","exports":{".":"./dist/index.js","./*":"./dist/*.js"}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.46"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.4.1-20230226175811-d32fc6d_1677457602103_0.8713445448648616","host":"s3://npm-registry-packages"}},"0.5.0-alpha.0":{"name":"@blocksuite/virgo","version":"0.5.0-alpha.0","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-alpha.0","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"a8ae2779a723f83138dd6b994433641c30e4e598","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-alpha.0.tgz","fileCount":19,"integrity":"sha512-JIrF9YXUcfzgU68JLK0lb7g+5CR3uVYVQ/foj7ZhrzTL5VYh051m6zYXrvTg1E7M+0j6C637UqZJJ13akqZJzw==","signatures":[{"sig":"MEUCID1bva83zpcXUuQCZwlgfS+T3msWr66UvmStZ0zNRt0kAiEAyWmS1p3hhmNKkyRhuOdgQPoqDGHgHFWUuvz+o/GE1VE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":52851,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/JIYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoEYw//dGHykDfPgmgvURBw7JZjToM51agAEChhcugI+CY7xNdoAdNB\r\nWU1mOC1/ZV6wIoCKBgtRf5OcLqkAtlwm1812dYeo7N8C1iZYKHrRm0FEhrQA\r\n0463yLER0fCSk+q0Id5G94XUaEbAUZvjHCOkjxgc/HduwlYgIsPxC+4WHIRD\r\nggMWsomtzMyKFxdW5PFSM+a0b+odKvHpW4jOQKjsCvVd5i1LRpldw2V+QgWM\r\nit+MpAAtvdnL0UqOnM4jieLj3d+ZtlKiTNqBKxv9HbqPgcGjmiPOFwkzG2JY\r\nFytjzM0xqFRtdFcEph7ljNk9q00tsylFJUutOzEoPwX+ilTtbFYmWZk5vaCv\r\n+IlIWxGHUGqC4z39CjlenMuHiWaDEVldvRfRtXvFwhJUp3auNg8pYwTxdvej\r\nbFUWLNz1uRGIGltrpqlWeoSIKImrQ+ah+HVvp1aUw/QNSYu4K0HKogoDp0UU\r\nmLO33nKNZ59MxkzyHfoIvxX+BwcrwMFG0BF8qaCv/L+2GXRE8q+G4urhW6Bm\r\nsE+Lwlis904Pa0TqLqkf2NXQO3bZ0YIfWGydRW2/pIorxORqNM0cO0oy64WF\r\nGuaZuJoUFM5HEsJ6R5SJiZW11TWB70KAhRBTM6sJaAZzu2OuyaIxJmic0O8l\r\nCG46MGMUZife0L8jTjakRG1yICM/aLkKg50=\r\n=S0do\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.ts","type":"module","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./src/index.ts","./*":"./src/*.ts"},"gitHead":"9dc2646625a99e227bee7547f6fc731eb8ba3e26","scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_npmVersion":"8.19.2","description":"A micro editor.","directories":{},"_nodeVersion":"16.18.0","dependencies":{"zod":"^3.20.6","@blocksuite/global":"workspace:*"},"publishConfig":{"main":"dist/index.js","types":"dist/index.d.ts","access":"public","exports":{".":"./dist/index.js","./*":"./dist/*.js"}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.46"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-alpha.0_1677496856626_0.39371425140910166","host":"s3://npm-registry-packages"}},"0.5.0-20230227215422-5b7fc14":{"name":"@blocksuite/virgo","version":"0.5.0-20230227215422-5b7fc14","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230227215422-5b7fc14","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"45ca570452656de1eb06a77b9a539bc8e5598697","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230227215422-5b7fc14.tgz","fileCount":19,"integrity":"sha512-oq5/Fjt7Alucs0ql/Y2ce+6YVi54hk9H4NTed6iJ3iAO7ULlzXMJ988V3c3D6OAVSGaN7qwoAsUhJX/rmXRz9A==","signatures":[{"sig":"MEUCIQCLfvB7SEoFGKmycVaMGfIibJwrHBI+kIkT4DhEoWPQ5QIgVWPd568ZlsbvPaVV9D8T4HEmltFxWYJklVvrb2uq0EM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":52866,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/UqNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpVFRAAhJOd6U2uGpHPPjv9QLkf/HyksS2ZGdlLljxfYqlZ2o+xw8EQ\r\nAkoJHd19BaYICx/dXQhWL5pamGM2lS56k5nhxoHJ5yT8u+6nTNiYDvGB3lR6\r\njexTdenmEVx/OVutOZ0AlpaXIKVFXGIvrBPqKeoxCchiuA0IW+NMFsuKurSv\r\nfp9/HpCr41y9or22w5AzVu15b8KzU3pxg85w0ppA1TcZPT2GNQoDFqwByUD6\r\n6luf5WYW0+CTsPYWkLi3cM2v+PWge7VVsAsxs/l30ebhcGq9rFdw8Vhzac69\r\nbSjKWqpqKKHTxHDrS7o66R+pGgn+NCo1Ou8cn9vLbc4E0+CsHI+lj+t9PHWS\r\ncwVxKubagCkO7qkfFjqwajWGjdWdJ9CWdmCUYG4aei1QN80FBffFDJdNt2xb\r\n7gGnFKzC4yQwgLN07MDrIfQO/18By1a0maaB9dYY66fgcIP69yyNGNxiF9u3\r\nNf9Sv0y8aXWdKypd9x2oKL06WQNF1BbbwmDNPof7sc4y2mN6TrkMHFRbxNu2\r\nXYwI2uOg29lDXV5P8OBTK17QP09uGwdMQ6R4C5PeH4aWjK3zTmkMb7SLBJwR\r\nJ6Fqb0F3H5E+WPw5vdZvnnmH3ieR8fiiIr1R/FsfEl+fIM8MGKQKmv+qCS3D\r\nSYcHtVmOT4la+hS1B4AHBO7ScqK4PVs6Ock=\r\n=UoTo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.ts","type":"module","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./src/index.ts","./*":"./src/*.ts"},"gitHead":"5b7fc14ea4fa37567713266cf735607e6f5a0594","scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.20.6","@blocksuite/global":"workspace:*"},"publishConfig":{"main":"dist/index.js","types":"dist/index.d.ts","access":"public","exports":{".":"./dist/index.js","./*":"./dist/*.js"}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.46"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230227215422-5b7fc14_1677544076786_0.8268499736611237","host":"s3://npm-registry-packages"}},"0.5.0-20230228075503-02b693a":{"name":"@blocksuite/virgo","version":"0.5.0-20230228075503-02b693a","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230228075503-02b693a","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"a3f772d9387014d0469c60caf69cc5389388ff7f","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230228075503-02b693a.tgz","fileCount":19,"integrity":"sha512-84sPFzzFlduRSN2/eZGBHuT5H/ODy9bJ8e2Ec7OH1oqXkinD/sBjBRi7O5I50BOU2Up1YOArPVX2aAQjK4/+Fw==","signatures":[{"sig":"MEQCIAmrWL94iZQeMF56VMf0khPEYXx6SXaqbPE1LAFvGVlAAiBaU1M6Cs4KVp/KGPeh3M2aBApyfG+1iBsRDr/45nDkGQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":52866,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/bRaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKgw//bzhXLjFxSmePVqXXvRhrl7xrDK0C4zaSWmHhUSws6HXk5Uw8\r\n+RjqsgWoDP+Q0dyWW2tdztoNcp+yhNwfKClQdVeqPDo924Yk0sPPLkUM5g/x\r\nEHFZAUeTPxJ0obN/MRFav89f1k2BZYNkaPgFz/x+feL2b80jPi4eBKkJK9/g\r\nAiCDkA6IDy1vbqDAc1tSaal4coiAmzKe7ciFNyXU9hYBtgSJdY5cXBDcxwPz\r\n5zVGLsyI1i/YdlFPMNrpfvsFGrzLZ1GK5kyDYcuBuMgUdNebuMzKCnaesiPV\r\nlrtK1X6k/41T3TFzxxOvouR+C6Gcy1kf1lMxf6zk72ez1/AQq1lhqrKK9ysf\r\nGnuo5CfDczEZIRxl4bdnF/rzNzryNUiAOnQRE50UpKk+DHXss6xGfSiZnEuL\r\n71hUw5mcJa6qQUEYNU2/UPZr/XVQuvEQObe51GktYq/DhwK2FH/JCtXL3mYK\r\nDRR1NPXmSSRGEfI5fC11huxJkxurL3X1mavXccBRbLqMpCZe1i1J51aQD/nf\r\n0rAF8jYP+ot47Hy9lilfmhXcJK4KsTLXrQPRnHvtziIXHJg4vgOHYTknvdcR\r\nnXzSWbxJwQm+wL4JGu7f8AVqqACyWgQPz/TJPIz3eRcQ+px46+LiuK1NtBW1\r\n+MPLGNRaOZWQeSxkPGrRKNzgjfK1wL9FlaI=\r\n=V3Wa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.ts","type":"module","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./src/index.ts","./*":"./src/*.ts"},"gitHead":"02b693a5385547023c4c70e564f39658ebc8aa78","scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.20.6","@blocksuite/global":"workspace:*"},"publishConfig":{"main":"dist/index.js","types":"dist/index.d.ts","access":"public","exports":{".":"./dist/index.js","./*":"./dist/*.js"}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.46"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230228075503-02b693a_1677571162163_0.9679862229819065","host":"s3://npm-registry-packages"}},"0.5.0-20230228081715-206ac29":{"name":"@blocksuite/virgo","version":"0.5.0-20230228081715-206ac29","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230228081715-206ac29","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"353c7fba6637bd23e66844ad6b66af5635fe4d2a","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230228081715-206ac29.tgz","fileCount":77,"integrity":"sha512-n9snEUQZlV0rrHaZyzyrAEQwkIU2jUSSQEn3/nUVsZ8mFzRsntaLYFHEx3u45Pz0JHk9fDRpzY/iSjA11PnBaw==","signatures":[{"sig":"MEYCIQCABWXZJhcAnWgSeo/xQ+ZY31fzmj42yDm7DL1sSRtoIwIhANfGNDDfgIn3LhGVxSxjuYIY8prKnkaL88q/oVuwfWA7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":296640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/blAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrwCw//fykmw+cPtid9CRkfITPG4VS+Js18bZ5QuiZTr5XOYMGwZ+6S\r\nlrZp9x9X5FQjQfsc55Pg9ZSjvMHIJ5+CDXZuBG3iGLycWO5ysu4Z2nbqTXg7\r\nzgdtTpsww/M0Zlp0ZW7iv1Bstuf+LFSQ7a/XX3lcK1emnwteBlCl/mIzn26w\r\nmn/LW9MLve6HSkQ6MURfyqBWR5tSmgE1XZAlJvQDL3ueKuE9vYPTWA4+R1f9\r\ndJsj3J/ED0vYelXMD1ytJlTuWAVCh6h0nHIGqJi5MhHwzSQ9k3pIgqvyUuXL\r\nDL//+1B915WdrvlnthXTzsDmG+6mEGxv9dxgVL0Ll/4CBVsCNmr59wlUSMD3\r\nWzOSsorGDP304VTGveX8jXO1rXtn7EZ7TH2PeordJE6Tb9eurwCy1/GKKbfl\r\nEMcfKj87qX0WtMj8vuBA9LNNA4F0QO2l9ReY/1+MR4w0F6ZNIVPG35wyKQ5G\r\nu34IQtlZUnWmjpZYie6ZvYLl395Gu16iTM+YBHLuLINZD7IkadWfRr3Grt59\r\nZQ7U0uV9n0m7XKYEBckEnyHhdCiQXHlBd6u8oaGGqfyKX3c1CIhECHI7cpJU\r\noWLE3N3jvhtjV9p5aG5ACAyv8AbRutfmCGvgbccEFXrzgZU0Ivw6RpM0vInT\r\nMvEX3MQgWm72be5YyNLtFFMTWE74BSVN9Fs=\r\n=MCDF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230228081715-206ac29.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/ed88760c39595f3eba897f4fd2bb2eed/blocksuite-virgo-0.5.0-20230228081715-206ac29.tgz","_integrity":"sha512-n9snEUQZlV0rrHaZyzyrAEQwkIU2jUSSQEn3/nUVsZ8mFzRsntaLYFHEx3u45Pz0JHk9fDRpzY/iSjA11PnBaw==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.20.6","@blocksuite/global":"0.5.0-20230228081715-206ac29"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.46"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230228081715-206ac29_1677572416599_0.9422190329684934","host":"s3://npm-registry-packages"}},"0.5.0-20230228114851-7e82f3e":{"name":"@blocksuite/virgo","version":"0.5.0-20230228114851-7e82f3e","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230228114851-7e82f3e","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"a9a793906727b72e73f08fcc1b4e0ce470e85722","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230228114851-7e82f3e.tgz","fileCount":82,"integrity":"sha512-uICjl42cneOwXnf3QOegJXjsG8stKPfClUf11QQu3Kp4Esy8bJzQDWGgyqupWBzMJAXYtPSHZsk453/hrVD5dg==","signatures":[{"sig":"MEUCICiRVZs3hINRc6amc5OzbTP9vThjHMwmrozDQ0NtiiCJAiEA8UbwDWBV+PN+CoRFbI1Imdr7XpVAyZbqW8dWVqF5fGs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":308946,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/pyXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLMw/7B/79jLlT97kYCrB22Pln4Q4eH3kHHF/9xpnNggXzYJ9g5WP/\r\nOQe5p46cZzm4zecQW/LGuqb1B4EtWTomtn7Mb1gs4yGawr2kVNPFirEhSBG/\r\nI6ZZKK0NugupeesCJttQTAQz5i188FrMJnKeoE6xKXDLUGGfqouoeJHy4zTv\r\nFcaZkYdKs/XI+nWnOKFsayyFm6vOzkWD+V3678SAvBAlDOftOywOBG0UW5+i\r\n9CQtdGlqgQ7DRAPvrCvKOLyfqtZwIVw91WbdaSEq5Z/SPZK/3qGR5V3nnYkQ\r\nkTqLzAHlUpLyhofCoyWl91zOnAZhpalrWaXfP5nXx08n9nNq/BhjX/gE4PuG\r\nX+XWL3sOKTgPFc3wR0AbkTHJ7BjIgVrDJauJtaakxPjGD3q5RfdWuyaQuk74\r\njpHXdNWbFPbF2IHBzlbaH0uxYFgXq8/enQoWBN18YoTvvkMe0vp+YSu8jsmx\r\nnqDG6tO3ic7qZLN8ulzz29QOw+jRlSgSKWrmyMX/hlMjexl/x9q/7dQtB4/i\r\n3n8IpUjLEHnG/ygvMrpBkB4ZUNEiE/IDvKUFddilPZxKrVaAYB44rUybLtXh\r\nElQ9tlgI2/MWLF35eZ9hVpfvN3cfwZE87/dXMkV+HgsmzJM+mOiM0ivJxLC0\r\nBO/zSeNz63ML0r5kSCfsC3Oo6op7vM7F0R0=\r\n=o12h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230228114851-7e82f3e.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/ffbca3255971e6974034e34384dd5dad/blocksuite-virgo-0.5.0-20230228114851-7e82f3e.tgz","_integrity":"sha512-uICjl42cneOwXnf3QOegJXjsG8stKPfClUf11QQu3Kp4Esy8bJzQDWGgyqupWBzMJAXYtPSHZsk453/hrVD5dg==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.20.6","@blocksuite/global":"0.5.0-20230228114851-7e82f3e"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.46"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230228114851-7e82f3e_1677630615147_0.06423386954795096","host":"s3://npm-registry-packages"}},"0.5.0-20230301172958-2384904":{"name":"@blocksuite/virgo","version":"0.5.0-20230301172958-2384904","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230301172958-2384904","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"56ab984eb24246b646096b60f57618caa5eec931","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230301172958-2384904.tgz","fileCount":82,"integrity":"sha512-f1ve17VsSV7VHt1yMMf4HDK42afyORDbDuwMoioT5u1fLxtBEB5ZNMrly5BJBg/DInDRZQxO32ARbJDLKGNvkg==","signatures":[{"sig":"MEQCIE+RAY9KGIr+ojztBd5H6bTUmIofI2dUeWUXTEVfx69/AiAhStmpFgg9e4dIzlrpRxxLIJtFcpi44yOo3P8SgVgQoA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":312290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/+3vACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqFig//cFsnoDS0eW9zxtpxg2j1SU4KnJajgqkCyjl1oGQ90OYGIEL2\r\ns+Rrha5nxAp9hlsfwBhhBJV9UqoQkUcZb1br7myxvFriRBHV4mIoykI3GR+d\r\nvBOVTgQyXME08ZpGumUvzO65dgh4A59WiOD1M/XZhqGN/kLOMcqz3ngPitW+\r\nDkjgDkaSTfxdJXAmgFHb/TsvMMyTUZcGOVxHek7kqQkTJ/7gfxZ/vvfiaMwz\r\nwnCtZtH/4lmdJjxCi8e8v96mbwKTkM3a1z3/O3blMoPJTx3wXFefc1zNjuem\r\n6WKi4akkRyr69kI3gXxLj5dNufBdDepHfPjvEyzbnny0xpnowEe0lvZ13LZ8\r\nZ4rThXN2HOcdJDPrMwdwBP2foWwhn5iJoCv+qNQQ0pPyARX1mPTQuikTsPUr\r\njoKnMElHvFyr6mFzaRiqJQZcZTNa0T0hSFah5gZgvXip8DisLEQaSZF0cdIi\r\ngoaRafp9lJmuGVulzpoG6gCYZtNLtZfS05T0hD9fgNqfkWwPtL8AXjrA630x\r\nQn1jo4PMJZcTI+oIxpV9OKRSIK7Sap9eUID91x6BFQdk/BcMqcj2i7ui2ikO\r\nO74cqOYWMe0UUr94WRTlIisBrz168UH6ETcTlTTpsL2v3w0pebnNOvuTNn5D\r\n895wezapSw56BNf1TWwSHrbkqBSYT+YgVpE=\r\n=PUKo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230301172958-2384904.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/eb98bdce3c52cbc5f0f804a29b57c281/blocksuite-virgo-0.5.0-20230301172958-2384904.tgz","_integrity":"sha512-f1ve17VsSV7VHt1yMMf4HDK42afyORDbDuwMoioT5u1fLxtBEB5ZNMrly5BJBg/DInDRZQxO32ARbJDLKGNvkg==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.20.6","@blocksuite/global":"0.5.0-20230301172958-2384904"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.46"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230301172958-2384904_1677716974901_0.8928663720646408","host":"s3://npm-registry-packages"}},"0.5.0-20230302104138-788dae4":{"name":"@blocksuite/virgo","version":"0.5.0-20230302104138-788dae4","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230302104138-788dae4","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"29bca5ae4b28ed9a0f63dff0453122f994a68d8c","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230302104138-788dae4.tgz","fileCount":82,"integrity":"sha512-tDWYtnAQZXa5ZT1Mqw31kgK4GLyOil7i5kd6wFfGIF6LvJNqg0BdwIdenH16+Cym/3p7tSB3xufeQE3gf64Y4Q==","signatures":[{"sig":"MEUCIC9CZi3K6xmooiFYpb9TFjajidUbj5fLg3eSKlAke8/iAiEAyeOT5reB1sUUKxfgRyjgiGVsGoIUvdWQn1UB5+NXTX0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":312660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkAH/hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmphRw//QiWce3tbdVarqaDeqQX/kIIVngbXk1LwxqyePK/rxqEDhb+Q\r\nz+28Maeg/bXI0xCtoYzJLHusiDC3iP9pZ+FFDuF3HI8iVc2qH5VBWX37LnYm\r\nD1y75XbTfXySTIAw6wOOmeSSc+bimXHG/ecCtQkP22I8hi+pOYVy/tSKneb2\r\nB7kxs0p0hZsr6AQD+qUc6ABwXkm7VZITLUeH24VvKQuznUc8MEC4FARVPIks\r\nUSYDYNv2C/da3x6kAuTd7rCEYCRD0OUqOoQ23FACbuxZ6gJzROE/RXXyMUxM\r\nq9gqaFlTG4MEPVbmn6XNKGesHpxOd7cyFkO/ZWZ4UNOjpvdhjADJ4CxwvR2a\r\nAMLA1qnXt86HrXY0Yy88KIHfJHxB6P3FbCg/cURVpEC0ZsOw5TIUbunGycKw\r\njHDpX5pJZdafmyNuYgZEvIlMpd+w7n5TgKlvuJaawbTb/e5QqzgAhaOff0u6\r\nWMcRk7pxUnQdULop64OlzOY0oe5iCKHqXy8QeDQq4CTE1WCW5OTc67VF0FHj\r\nFCskwo5oVOW1cQhd+J+U6QkbSk4Ul68DSCHG7XhqTki9mQbnZ/rKyplvPNM3\r\nMlMjKJ75M8v3sT+aWSaqsNHhRPrYboVoGb0kzGIPLnFGq3USzCEu7bVn8qaC\r\nefo49BdTyUZ4WU02PpYsp7yDqqQ4axks52A=\r\n=/+TL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230302104138-788dae4.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/40901bb3868ae4274e0f7f514b8de9e7/blocksuite-virgo-0.5.0-20230302104138-788dae4.tgz","_integrity":"sha512-tDWYtnAQZXa5ZT1Mqw31kgK4GLyOil7i5kd6wFfGIF6LvJNqg0BdwIdenH16+Cym/3p7tSB3xufeQE3gf64Y4Q==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.20.6","@blocksuite/global":"0.5.0-20230302104138-788dae4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.46"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230302104138-788dae4_1677754337425_0.02844303584367691","host":"s3://npm-registry-packages"}},"0.5.0-20230302142916-8e090d3":{"name":"@blocksuite/virgo","version":"0.5.0-20230302142916-8e090d3","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230302142916-8e090d3","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"277820c6324cd700b0b276a9ad2115f8cf08f050","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230302142916-8e090d3.tgz","fileCount":82,"integrity":"sha512-doQas2VwFjvPq9zuqdwDqa6kpX+/PVeGRY0gZzkZCWG6Bnw1MFORRWqZ6DEibjNtT0cBdWtjz83W9fYMqBFjMg==","signatures":[{"sig":"MEYCIQDroPy8Hr/5WKJjDY4FgG1wyhyzYST7woh545S4mvRwwQIhAKCBfEi+ETk0EK3yCBRPtoF/TR99E/kSZgX8d9YJoVx0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkANm6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrfgQ//bCIWyTLNqp32BFbSmy0Eg+F5j5hInPWzJE3B72BIms/Rfhvq\r\nOuBiZIrqiDDQck7AiDiqm4VVQk7CFkdb8Sq/Rb7hR1kX4c4wbECE5S4MxmL6\r\nRyfezmtH4ab3OZAXzqlsEW0/2ly9AKR4FrONb303ZExtJWQHGE47C9jdH50X\r\n7CprXLxgtgkULs4S3tCZigrYRUwVFjh4/u7gQIbSBIItX6zw8iVwem2tW0Jg\r\nDNItCH1rbnsnN+CCVdds0kgpskh5gKlQAXbDNTF2gadw4ZrM3juy2oTXOTp2\r\n1ksWbeS1mEz/6JFjPTlihL8IvW1wlt0QkGsWTP1wj5RHfb2vh9I28vsP+oNI\r\nW1JPVGzZ9EK3Tt5ZB4XjeJbrnoATROlcFz0olNPTqoIJKUG5csY/ZOhUMqVU\r\n77PSuq5W+0tJ46vzLjRn9sMbuB9G7LVnhAwYy+N7Cc4BIwui7FGP3cUvu500\r\n4bJHT8T0ga0A1dvDw9o7lOKA4j9zAtoQTaBYGX0HfGlVSMnufVeJ/bdlJVGW\r\nkQxYfFRIvSQL2PAs89cxUtP9Bh0pi9l5V2cT16EhhY57hzDoz0jV20N0l0QG\r\nmlerTIjHLZcuP9E2vcLvouHpUMUpOwp1bPf7VIgHEIKOOtIe3xGKz3FA+u7Q\r\nuEQqwmFPvd6pfuUqzDuHPT0wAW8e13dbAc0=\r\n=oB6O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230302142916-8e090d3.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/c22a404748ee9eeaf027c917fc26acfe/blocksuite-virgo-0.5.0-20230302142916-8e090d3.tgz","_integrity":"sha512-doQas2VwFjvPq9zuqdwDqa6kpX+/PVeGRY0gZzkZCWG6Bnw1MFORRWqZ6DEibjNtT0cBdWtjz83W9fYMqBFjMg==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.20.6","@blocksuite/global":"0.5.0-20230302142916-8e090d3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.46"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230302142916-8e090d3_1677777337882_0.7422436434155795","host":"s3://npm-registry-packages"}},"0.5.0-20230302205056-4385b7a":{"name":"@blocksuite/virgo","version":"0.5.0-20230302205056-4385b7a","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230302205056-4385b7a","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"ad1dc31d43a58ae9d080dc253f85ffc2f6af6b71","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230302205056-4385b7a.tgz","fileCount":92,"integrity":"sha512-21OIhm2wJBExethNu4GF7eX10fcRAZFffx7t621kLEfyKAEryuISOKjv1V80EAQy44unCljKbQo1Lxw0erKFqw==","signatures":[{"sig":"MEQCIDEoZe7rS0RwB8BgQI4euggpUyeZAD/6/0tiHML/NpniAiBvyX7mFPUHFRwtPgdBsIUBvQ4odCg1XtZavWoFjLg1zA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":336373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkAVWSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrmAw/+PrFP/7PbV7BR/iT2WpEXsoeXo5KBzdtdGsWUu6rIYjjy4mmI\r\ntwdkjRvaR3VgoDrNSDgNglZTTKCo4Uk0h7szaChnwyA93KsSAL0dJsl9nlia\r\nlxvF5y8I3VpFdFyUNweoxkVGgAOnvhAyajrSlf7V1JZT4tXynASU9eylJeS+\r\nWNgjyGqYkdbLzmm1EK0mBMuxaVmygXHZuorW1PxuW9P9CDywNHQnf1gNjvzj\r\n00uZ4RFzpqjGuAeK4TYk1fP7Atq+9IlaQe6hJI+ASUayJP8WZDiYKDPlcjox\r\nFXYiUBGR8C+d8uquzr+1BDcPKmAAGHkpAQGjh+VfiZidvHrh2VmTXsJ0Sli8\r\nZFPWFWuFrFhtznm7Mv+q/4KsQdk0dhQ7RpuoHfgAZTlbil2sLFOJdl4vpBWI\r\nkq5y85PHFRvn4MFmHMamVpM0TMKKob7beYrquoTmKINZcMISRnnvs378pP4c\r\nZ8EBPh6paxtWhFFkO7bto4mibk1cwplfgYlJaOuP0XYSS9DKshqGeyhJ6Xio\r\n+aGUR7C5B1yp0lG1w0ZVPABh5J9evcKTMSKojgTy0qY9OLKtv6OGTpy6hvfO\r\n1w1IXhjrxws45xOmf2kISn3zX9UpK/c0oK5/DRQB1McPdaPbOq4Spj9JBHx6\r\n/LXm1B01Q0Zrs2XoOgrQ7sZaLBtuaAH/Vow=\r\n=MPcC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230302205056-4385b7a.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/070a4682ee3e5f234de8c55f33f35801/blocksuite-virgo-0.5.0-20230302205056-4385b7a.tgz","_integrity":"sha512-21OIhm2wJBExethNu4GF7eX10fcRAZFffx7t621kLEfyKAEryuISOKjv1V80EAQy44unCljKbQo1Lxw0erKFqw==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.20.6","@blocksuite/global":"0.5.0-20230302205056-4385b7a"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.48"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230302205056-4385b7a_1677809042020_0.9086723051234649","host":"s3://npm-registry-packages"}},"0.5.0-20230303192351-13b0dd7":{"name":"@blocksuite/virgo","version":"0.5.0-20230303192351-13b0dd7","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230303192351-13b0dd7","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"e6bf918cb3bec6015b957577f32f918f4ef0708b","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230303192351-13b0dd7.tgz","fileCount":92,"integrity":"sha512-5852CfyDOIpaWHdDEUNDiqdISNnG8ggwRR7F7J1ZblkhjYs1sqO/EPhgLXnIRMO2GizP4MqqOZtOb9Jx9EnajQ==","signatures":[{"sig":"MEUCIQCTumqA3hng2itIwYq9c549J05x4ker8oII0x9jm7Vh1gIgem7BgTtoJ5NAeDAxPyThb464QPy8gNfeVnpGB83O9jY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":337079,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkAkpNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/7g//TaJ8A9J/KB74cnJWjf7HxiyqZ/ofvua8d2Z3W0PKBOPmgtxp\r\nnOg+bsdymKpMVerPyScjDoup9e29fvOD4k1GzZ8btkoPK7cTTVhV/RMVzxQC\r\na/+EdV8OLCLscDDaP/CI/P3o2fnXwmeF5jFZtdcmTgiTyofb0clqIcXpIFdT\r\nYeBOmMEHHP8FTZOkAXLBFbhYEbLqEhf48Obt7OnT6CqZryp+iBadVDHZ8wd6\r\nQXxz1KE4/0WUX3viegv8IyHsD9l+AswR5W/c2NyxEK6hAVLPnT5XJTcyID17\r\n9Zv4M5MlxI4TAJ1fC36XR/r0pfr+sar7Zh/wchqvYKrAzWYL9l9h0Wyao4GT\r\n5Y+1JBFuR2mt282lC2DUUqNFFMolOZ1/HWDmoYfX9Lrxjgc1v9dI19jIMgsw\r\ntZdpKdkSkV3eRLYcZZyxObQNBZZyh+SNpJF5BrYbLLuaGIXAr7yhFwFbk/YV\r\nXYMmxJ6Gbk5RNtGAy9Ws7nhG2KMiQvccovxLyX/GkPKHfv51zOCLuV1fxu1F\r\nGeB9S5pnZD92sZT/AHpK40ULkFnidWk/m/4zABNE6l8Noqg45q8rsF5Okxmb\r\nzsZ6uZ5eiNWg8u4Al3YFUwPA4rb32ZbQP/XsItZS1qZrCDnTHNXMPvAC+3XS\r\ncExgDiJ0W6eGa/gWwbw+eJR4FN9ZeXkKuz0=\r\n=OnqK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230303192351-13b0dd7.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/82eb89e8cca20a0bebf4056ae096fd09/blocksuite-virgo-0.5.0-20230303192351-13b0dd7.tgz","_integrity":"sha512-5852CfyDOIpaWHdDEUNDiqdISNnG8ggwRR7F7J1ZblkhjYs1sqO/EPhgLXnIRMO2GizP4MqqOZtOb9Jx9EnajQ==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.20.6","@blocksuite/global":"0.5.0-20230303192351-13b0dd7"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.48"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230303192351-13b0dd7_1677871693311_0.4511593331258643","host":"s3://npm-registry-packages"}},"0.5.0-20230303194346-1eb65e7":{"name":"@blocksuite/virgo","version":"0.5.0-20230303194346-1eb65e7","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230303194346-1eb65e7","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"e2a56b32c865962ce8806422604f1ea3d2492d41","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230303194346-1eb65e7.tgz","fileCount":92,"integrity":"sha512-eS3JWHbyLoE51Os8KZZhKsS3C6jYOLjBzI3AFoK7efdakko9X7qLuCB1mV1U9obX0m0tLI5j/MBKZdpEo5IiFA==","signatures":[{"sig":"MEUCIQDuaS1dnJIIJhWxHdVQq07ZXXbjTNb79rb7flKjiAapUAIgGQUgrBexkJkL7csCsz3B1KZTLgCWGARYxYLUPBTdUVI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":337079,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkAo/eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqTqw/+J/S1RNG1E4SWR9Ra6dgyQvoX90eoDa1LUzDXRcB6XLdU6+CQ\r\n0lKEAD/43nVTlH63WEvRfgO53e8lp/4iA838m4R5SLmXe4ek5xmmsKtg05Dk\r\n5wZljHh/fukSo/EQApdP8lca+QIlH+HGAsMOQ+RR6etN7SVy5jkrhnqnhlP2\r\njt50umkxKQ/ACZLWC42akHMPNbQPfP10OhVAyboczXajCG+YL8RiplX2o63x\r\nI0kAkgjNjwKArJZk+Nat0tEUJsUGPJh6WZ/XvhZKKHktOuy8bR7w5dt6O8uo\r\n5BIrl2pMqMPKubMlP4yZS5PSLqeXh5fKXEin8WU/WUMfFiYJkAQ/O/GS0xbt\r\npac767lLKwNifOopl5NTGcNRA5qrZYtHj1xIhyVEx5TvuNerSjYyK0GTCggN\r\nXgHuJlGWDDAnRwkvkQp8DlxZJRUnRMJSMJuStZlAC7xC1TR75+eOixoTZOjL\r\n3OcjCph+3RV0uz/Jku8CUoJgiK1NS6FOUE6iAKrHD3qgD9KqbnWC/QdLq0I+\r\n5cxyRarYZKtVpf4z8Fcfwnt786hG67kgERmSzKEHvxGJcjgK9flEkxiDq5KC\r\ntmZnV3zZ1wBhZnvojMU+pvMvq1gLiP3y0J6CQLB1p3N5i3alTzgbajGGIilm\r\n3TKRBNq4pnQiQOnMKQX1gjgDlDkW3IBFkQc=\r\n=P/T+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230303194346-1eb65e7.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/3dd5b569225f04e26cf0e13aacd1a5fb/blocksuite-virgo-0.5.0-20230303194346-1eb65e7.tgz","_integrity":"sha512-eS3JWHbyLoE51Os8KZZhKsS3C6jYOLjBzI3AFoK7efdakko9X7qLuCB1mV1U9obX0m0tLI5j/MBKZdpEo5IiFA==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.20.6","@blocksuite/global":"0.5.0-20230303194346-1eb65e7"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.48"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230303194346-1eb65e7_1677889501814_0.4113865242733874","host":"s3://npm-registry-packages"}},"0.5.0-20230304183717-8ea9932":{"name":"@blocksuite/virgo","version":"0.5.0-20230304183717-8ea9932","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230304183717-8ea9932","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"b08ee6bf0a948d1229e2f7a022422a8e8476caee","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230304183717-8ea9932.tgz","fileCount":92,"integrity":"sha512-lyrz9tXiq3pEgBc/5XlQM4+lMmF7cbD1R6eGFnc0I2zeGoxiAfcN789wKAKV0q5ijYmapmzO99y/NZDeRVIvfA==","signatures":[{"sig":"MEYCIQCCHOuH+sI75Ppr6fpCb/uuauJaQ0wvDaX7RIFTIJlSEwIhAPccOFrJPJcYBQzSPVKvMnJBCst03/Df4bZR+4AUvII0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":341284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkA5CdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWYQ//ZW7y8rFpClj/j1Xu3U8Envrtq/AqRgOB61EMWcVUmYPIHsUS\r\nCY7qH9rMvN7Hunk3aDG2Dt70PA42x/PxgmA4piKA7FkKvtY7tp5KI1isJZqg\r\ndA5nmmbe91K+4kSRuzsZhBmgi/yjbtHE2Dd+3UsA2r7U1FcotUzWK9EEgBGH\r\nsubaP4WiMHLPdIT6tg85LR469yzZruWKbEFH4DT5m8a0BItLZG1WwSp6mhIB\r\n25rr6oVJ/oOCyFsBytDfDp0J+alWhZAo9Etrr4gFcC5Kawxk//lkKOeF8vG3\r\nUTYwKRRMaey3vnZ4/GCzTyJYTtHEg3BvJylWRvZawypesXOeuuCmiqQR7Tm9\r\ngFD0EALe6Fqnz1Zh1fsrxAeBe5ssLEteh8VeaN2CwnD+MLAhrt80HTxOnUbf\r\nSMXHqa9Kq1SifIYdfgcE4dBK6426ZrfH4ArWjKKj6ceSvTWBxfb9chlWIL1c\r\nJzyj5EbbbGN6ykBlaRxoFHRKCwiqfStB77g2Uly5ad7j+ZevsAe4cNSjZ84E\r\nX5DGSPNfmUY1+toXHHLLFf3ZgUyyx+WcbRL340znS2C/vUNE98Vsbm2nVT7s\r\nzntYIgv7ekusHuwq2+/uPmvgmTjaWVUjza+cP+jqVwb60iTYREsb/kBPHz5j\r\nDM+YYvQf45hUybYk6P5/JePSRANJDkcqEk8=\r\n=WBds\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230304183717-8ea9932.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/0598cc2c482d2289b65144393033a21d/blocksuite-virgo-0.5.0-20230304183717-8ea9932.tgz","_integrity":"sha512-lyrz9tXiq3pEgBc/5XlQM4+lMmF7cbD1R6eGFnc0I2zeGoxiAfcN789wKAKV0q5ijYmapmzO99y/NZDeRVIvfA==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.20.6","@blocksuite/global":"0.5.0-20230304183717-8ea9932"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.48"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230304183717-8ea9932_1677955229627_0.7165823047952442","host":"s3://npm-registry-packages"}},"0.5.0-20230304192152-02cfe2b":{"name":"@blocksuite/virgo","version":"0.5.0-20230304192152-02cfe2b","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230304192152-02cfe2b","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"5974cb0819d557369f3352c56c8dfe0f88400d33","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230304192152-02cfe2b.tgz","fileCount":92,"integrity":"sha512-KcGaRC1ge0lXw4M/agX8ZKLOd/NADcrC8eVThTELEUbDCcC6Z50ShhQJ9iobRY6goM30xQ6lGqU/SGrK182c1w==","signatures":[{"sig":"MEUCIDz5uZGh+zZtYsqWu416QFe0AR9xsNW0jyDnfbTS4OrXAiEAuwdkIFnzZoQBxvAwdf0z1j16Q7CUEb9LB9G0xWjZArQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":341284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkA5s/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7QQ/7BlyFXca/RopoLNVPFwhVI/nFuBg+KbGeeA6WsZeUjy5TmdI8\r\n/xbMu4dfw36h8AI9GNrv7kn8oqS/dTEne/S/2gYUBfWiHbqA1hCfnqCWSyWR\r\nlwrU1tDgy7//qjrU9ol9yG1bmf/UTQaV4UkNewJZJa4q1qIpRYmvA+vZkfsp\r\nBnhODzFvdcf8iu3BpDV/n+QAElT+ceNDLD9/AajdIB/ISLxAXZE3UgfYh0d9\r\ng5S4QNyI6CUspDKx2Lx/evQ0xFRA+rGTemYIR0cInjR5WGt4c4joUNLkssMM\r\nuPPtfgAejP1ksTQYTD25XLONrtKbgkkc3Kz4Y94p4vYeqYF8VthT8HjvtvCd\r\nC9vBokL+cnrWGZOr/qYiUzzyTjwsko5I5HNkpLpqP1noQ6bfMiylLGoAdVxC\r\nCzldp2VRRxVxNDMwfmHxu0q0I6hLupX5Ni/YMaizwNWITO+9T23WmVOr1FvU\r\nD9fef7Lt4bfoINl+O/U1/cwGw/G7nv/y01vc2jcE6wuBwFb9CMUQkRPsUhrL\r\nXK0ZGBTy33KAlZ/fbn9bAg5mEcf1PgyjZkiKeYdjiWSHwIwmd9UcRBlDxVmy\r\n2HRw8dtKs2dB+t0BftIYqRWzyVm2dkdRU7SWouBtD/CGHvciVRXGw5PFrrbj\r\ne4Qgp6smv2+/Dds7cDQXqFpbZY7UO0UAukk=\r\n=OgMX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230304192152-02cfe2b.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/7c9dbaac8ab0651cb55e4417790285db/blocksuite-virgo-0.5.0-20230304192152-02cfe2b.tgz","_integrity":"sha512-KcGaRC1ge0lXw4M/agX8ZKLOd/NADcrC8eVThTELEUbDCcC6Z50ShhQJ9iobRY6goM30xQ6lGqU/SGrK182c1w==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.20.6","@blocksuite/global":"0.5.0-20230304192152-02cfe2b"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.48"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230304192152-02cfe2b_1677957951672_0.7314024207465373","host":"s3://npm-registry-packages"}},"0.5.0-20230305195734-5878b62":{"name":"@blocksuite/virgo","version":"0.5.0-20230305195734-5878b62","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230305195734-5878b62","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"48a547a6d387295693ad54d22311cc00f9a6c2d4","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230305195734-5878b62.tgz","fileCount":92,"integrity":"sha512-NmOrGy+3z2ACPhNjOF5yhhsWECBegJ13YNKy4KvVB8KwOJZkD/U036/1f8ZsJsGPetckzmQRyaCgI9V2KV018w==","signatures":[{"sig":"MEUCIHoerSJdW1ebTz7NzBfUo9nNKe89xXPFTI+RpyXFtbDEAiEAy3Uh37SZrGoqmPe0MiCfrCGe5vW2wyL0f/qfTWncZcU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353274,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBTN6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrdbA//a+0IypDAYSY+t1d3oZmR/44T2pagtFJv2V1dQNWZM/jmgkEt\r\nC0n7WU6/6sGGDgldkhiO/TylZYVzr0S6KO1h0haFC9AAj1wEaNMe9wSzXjl3\r\nngQB96jLWFSJbAwy40GLwHV2nwE6HA3MRtwZY3aQ8vCfW2LpEBxDb/3pAcl9\r\n3+tYZE6r4yh0PXOoF6WzIygYHVgxj28UQtWAeyAFxdURJgASCsBfFZcq2X8i\r\nCY6y14qaOw2hv5YUYO0oVDwhjCKo+LfB+3g6BtyR0EAxNZt58KAZZ+GAWEtz\r\nFFsyYYznxTHrLPiR0mtuPobyrwkpjgn2OS1CgPVigV8qgGfLmKZtDktJOhaO\r\nU0WAQ5CnavHW651zWkVg7OFQhTqODRLPh4wM220uatGf4E/2TSaT05s92UL2\r\npulCMds3Fq2tW1y1xCohPKPbgKJQjo5YnNNN2/nJfj/bS9sULAjrOtYrkFP+\r\nr+1q9Bzu9ND8g6+OdkA9BT9Qu8osQU/OhHhDZzdxTeqrXm4JF5dMH639wWIQ\r\ndlBDcBp0cbBCqfL5iqoq/DSKYVaPlZAKuF1yMBpcYCIVNWtsfhdVY8NdKnF/\r\nBwbUe+Oh16JS42yvbvmYU19gqC/dUYvndlc/iawZjbW3lqJaRoOES5n6kJVv\r\nDoNWOuXPLqf5T6Cnm3gzwLtQmqiKfAv+q0c=\r\n=n4wz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230305195734-5878b62.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/50b15475f244d951c4aeae39749088f7/blocksuite-virgo-0.5.0-20230305195734-5878b62.tgz","_integrity":"sha512-NmOrGy+3z2ACPhNjOF5yhhsWECBegJ13YNKy4KvVB8KwOJZkD/U036/1f8ZsJsGPetckzmQRyaCgI9V2KV018w==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.20.6","@blocksuite/global":"0.5.0-20230305195734-5878b62"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.48"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230305195734-5878b62_1678062458199_0.2913800223235121","host":"s3://npm-registry-packages"}},"0.5.0-20230306231625-c219ab3":{"name":"@blocksuite/virgo","version":"0.5.0-20230306231625-c219ab3","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230306231625-c219ab3","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"1455e173a9dbdfc5818bbc860ceab3effe66a43c","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230306231625-c219ab3.tgz","fileCount":92,"integrity":"sha512-MEP/BDKFhv/BBdJEcJy1R0RNTs+eZBSiuik53PQuZL1h6wl/t0Rp1cEdeOlakennWsOY5EWtX5NTNZZJ55WS7w==","signatures":[{"sig":"MEYCIQDqKJsa7a6CQnDYlI7WICNAZA3HiOOBuoqfF2fN9rdWqwIhAJgrNyFjNYVQx7qPAyyf0+/GJUUtOO5bpJuZC0Z1pRz7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBoU9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp38w//XQnT9fS4Kjyi4+FEYeukp6YSc+XEsIVc1XrNhQcvoLdBPdYT\r\nslgg9APzL+Rcep7Tl7tqf51JGUa2EuCmRQU2D+Xo6RgNWCWpRKIKJzArSarn\r\nprTCZlVEK71NPwcHP/NYVmODI3hS36xXv5QQv7Ko6W05GEqK+NoLYTYzF3QB\r\nOP6F48AkgXRVnoGW9/VuuCQv8D5eEY1EPUTpj+q94m+hn5XhY9huGVGDz68k\r\nRSf5HsuRrI28hq+98RWibim2FvqMJAb/TL5A/8Tz0/EDeXIOdMOJRCvHUYr9\r\nMIVUX8vmYpmkJ29QM+1dldmeJ2pxboxyVcmY5Fsj2OzLwtsxF6IFffo38ul7\r\n6WbIlXId5SA8R+pCzkeRlUMv/UU4dQD2jEBFf3SZuwWevqJ/iaBq2Gqy8agL\r\n4j+yUaX5xL9sRnmI8rc3sjaaKH6SkPd0jZaAcW5PoqznS/f5reBi0JafBzuC\r\nLtHgjCV5gFXMtGY3K6jXIyg2rDKy19mpLedTdaky+Qw3n+Y8WQgoBbw5jtiW\r\nsNC3sbaiqcKnOcOkbV3x77G8twRQJo9AfEZKa+RzESRea54UkyxVP0gdrb/M\r\nr+vpC2ntqQDOu2ejEROrWZy/rFpXm15CxCDcYKBgiOxAD44LSAAB//WSztY9\r\nleIWHxc9plUCTOJ6c0M3+/Tj1EzKsQcDP2A=\r\n=yUXA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230306231625-c219ab3.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/093381b9c2d63a01216144913d2ed105/blocksuite-virgo-0.5.0-20230306231625-c219ab3.tgz","_integrity":"sha512-MEP/BDKFhv/BBdJEcJy1R0RNTs+eZBSiuik53PQuZL1h6wl/t0Rp1cEdeOlakennWsOY5EWtX5NTNZZJ55WS7w==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.20.6","@blocksuite/global":"0.5.0-20230306231625-c219ab3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.48"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230306231625-c219ab3_1678148924944_0.5184297857705238","host":"s3://npm-registry-packages"}},"0.5.0-20230307101545-7d5aefc":{"name":"@blocksuite/virgo","version":"0.5.0-20230307101545-7d5aefc","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230307101545-7d5aefc","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"f45f5cd74eb7ac1ee0bbc971a37f6687477c693a","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230307101545-7d5aefc.tgz","fileCount":92,"integrity":"sha512-eHMjOssgqO1ljo/BBmp9nte+moJIwga2KmMXhJVilDG083kHtKOxkurmjrvO57oY+T0Ema6zo6T+Yq/u8NH7Dg==","signatures":[{"sig":"MEUCIQDCUYQBm6L0ceczBQFkA0bZj5tinxgOcnt0dWtOIL0KugIgLm0rjbzBZo4nGOEeCzNQJWUdXiJvdLO/b0w+0pq6qbg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357050,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBw+ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoj6Q/7B1GMnDanU7l8NgQeJicsbL5mVKJ14YMVLT0Lp0BNi+DzazQE\r\nIf9TIbJWCupbyl05MYTH3AvmdUnl1bQ2I/b1AWZf6cbHzQRq15jKsHkiZPat\r\nmiSXXXH98LO4I+IS1YhEzZUWH0W6k7p2HCgcet6nUxUrVMisAuEpya4yhzET\r\nO514gH6VMtWwwq1jXPGBIfABpqnb8gwsyOj2gDioIWsbcplzRVHAwMWcsafd\r\nBUj7FDvZPHQZKrAvNr5VvBZSarhSx5pZSRt5SXsF607fsee1r2joiPj8Cp0p\r\nV8dwKa4+tKjJqsA7L+wyNaD1mbyIaBqRhHaCY9fBu+WeaconFKLXk1KACjO3\r\n+557IfH6XJ8EJq7otOft8twRRxyBAfm+aHwEQJPNn/VbTPlG/4pHUo01Nemc\r\n6DpMeSdJrQ6d6cATdlRt98H4hpU7eLLRFFztV36m+fBamZlMnoM0mtaqaZOO\r\neCLZnIzGAZcukYjG7KCc17EvKpUCExFA/Wn32LTo0G9U60YKn27YDycZDKd/\r\nJPGyP0CNtf0hZ9ofrdgu5x46B5wYR0rsUhhZpsBvwhR+1S7sCalkA3YC1Amu\r\nUXLjY3Ktzzvs9gDH+/I36ncCYdoXaio65aBZonkOPi6whlLjfN7sYNzHcZ69\r\nw3Q9kBl+AbQBnfNOfH/uZg+jyNMBizvJU6I=\r\n=9Bq6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230307101545-7d5aefc.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/ac8d00e80a3984b55e14b5d24b407d73/blocksuite-virgo-0.5.0-20230307101545-7d5aefc.tgz","_integrity":"sha512-eHMjOssgqO1ljo/BBmp9nte+moJIwga2KmMXhJVilDG083kHtKOxkurmjrvO57oY+T0Ema6zo6T+Yq/u8NH7Dg==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.20.6","@blocksuite/global":"0.5.0-20230307101545-7d5aefc"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.48"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230307101545-7d5aefc_1678184345606_0.6756116665416838","host":"s3://npm-registry-packages"}},"0.5.0-20230307224400-a4c096e":{"name":"@blocksuite/virgo","version":"0.5.0-20230307224400-a4c096e","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230307224400-a4c096e","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"7be4df90361104216b2b4134ddb13fe7465c533a","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230307224400-a4c096e.tgz","fileCount":92,"integrity":"sha512-MhOmx+aknfhUM7yyIr0eKbQxNO1faOpQ7swfV1XtW7fP5ngg1ZrTES+TBlHvAqnfff/VgrGniHWiznmUF16s9g==","signatures":[{"sig":"MEQCICpgQLpoac7xkYx6oSDbhhBZi/ZM0bG4ut+kC5fZKtPwAiAtWjEg4UijnHjSuHeQcvFXYYU2fG1DdVYVYRaSDVjo3g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkB9a7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpzfg/9EerWkL6hetm37Zjiw2vpOfSFEvfJ+JG0NEz4p7YRWc0RxqPJ\r\nxTe4UF2EnpC/KJbQGDC0DioQV0VYGJ2k3ajzWhMo683h4U4i0Tzy8/QIlbsn\r\nvk3wrWQRPiH+Eg3in2sa0xghMcIXlidX6UnoyNxd6ioVeEEfstKjxl738ra1\r\n5F3bs6eV3X/V65iBOmOKBfXeDeb6W3pcDe1PZ7n3vlQrHVB/wjegHU8pzrgW\r\nDBSuzlS+TkZN7xhPClY0TgYMo48vdPB8mqUhNaMWWfqh9T8ldagQTPog0CYD\r\ncvRkGklJlHRywpJkqaQDlgC38JTxa2RYar07fJzIJR1hisF603S55ZrdMrVW\r\n0k3PYd2eHT7AdNj6s+n4b+vMnRf8hcbJETjaLgg/j3BLbkosZk7FDwTiM8M5\r\nn1ReRBuJa6esrJSW3TemTG5PYyaW7gt5hVRgh2/4i4VKLgK5QZTyi6oZbIiv\r\n42M8b0VU1UCL4HF48s3TV6/clHv0QLkIFqUivoRA1gtigBks+qhq3OJhZKCZ\r\nq+cMHsfGM++j7fpeIY+Khef0JPj5zc3htP2WUAi6OwhZZiXcSECGcVhYas8Y\r\nJeAQRNkufUdZJ+CxhWEZ34fa0g1T/47+VaIEAFz8DHoHSW4tbgW+ShLdW8Xd\r\nm/dnv+8cmlvZSdjMhwqLhRzmH/xF65x8FqQ=\r\n=Vtx4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230307224400-a4c096e.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/879d738c2d70cfd7ed13d367c58bb1f4/blocksuite-virgo-0.5.0-20230307224400-a4c096e.tgz","_integrity":"sha512-MhOmx+aknfhUM7yyIr0eKbQxNO1faOpQ7swfV1XtW7fP5ngg1ZrTES+TBlHvAqnfff/VgrGniHWiznmUF16s9g==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.20.6","@blocksuite/global":"0.5.0-20230307224400-a4c096e"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.48"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230307224400-a4c096e_1678235322796_0.8081452603246597","host":"s3://npm-registry-packages"}},"0.5.0-20230308090832-6594d8d":{"name":"@blocksuite/virgo","version":"0.5.0-20230308090832-6594d8d","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230308090832-6594d8d","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"9cf42a6463623419c764865a707b39d51968c553","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230308090832-6594d8d.tgz","fileCount":92,"integrity":"sha512-3dscUQ+tONU9dbE0l3Bd99VKPiB6cgykxrwibwHbsx4ATZ7VzTGUj/q4zaqk6WfDvvB3geNjX9b+t4Lr+rsu2A==","signatures":[{"sig":"MEYCIQDkVcIZ8S8iis3vOvZ06OTy01cSTM0sPPx8jzjW+h2hWAIhALwm8Vt8tRGXoAz4usCBXZrX9+RmrgqMbAl+Q596x/zi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353447,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCFGMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoNSBAAlr6cjf4oOJVVYAMEMGj6aBdNJuf146kCQ3f9khd234iJDo+6\r\nf9YiShLiMJBcXJcmYM9S6i2XaB0ym9xcDFQtjNzq36ro1bCZozPSdsh1RTzs\r\nMxYyKRklhmJUkVvvS7OYnoZY+BHC8uuMuKY6vuVSxPbJslGofKSjPOuG/9rA\r\n+rjRNCV+MhiGWUfLrInWG9fsOjQYungpJj5JWYWWTIEno+IRWJ5XVf1vzXVN\r\nnT+Ey4sTS7MFEvqVaFWLAXUrhPPdNnQeYX8exPC+g62cbmBxp3D2vL/X53Xt\r\nL3BCouD1TKikZL7LB6w4msX+w6jR6kUU1/D6jbEmbHPptCeOhtBV5F9mrt6b\r\noOQ3VO7Cq8wmV3VwtWkqIZ74gKCjGSiVhc+bO1eWQuiiP8q+LqpqeGKkzJaP\r\nyzBtRAdYq0xfKgsaYd8qaeYn013ELyYRbxLx5EGXBj/eIe3c96jKB/wQqL2o\r\neVSCYjZRMS/6eetOIeC+xWLmW0RaWAmoGzAJg1dYoo0SpCaYTsmTnEnQLSoR\r\ntsaJoyBiMnpxj2yJ3jvg6U5x67pXaCyonA+yK/0BP1jtBDLwmLKYW+fH4jW1\r\niIA1qzobkIRQ+21RW+tr/xxChC8tkNgP/Yz/3EJ9bXMsMsEkF+bOFYfj19nB\r\n4d0b90M+DYRQNBUa+CbxamiLrbcC2RfmL0U=\r\n=X2ba\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230308090832-6594d8d.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/ae5c75c9e925e01f14844db5527be2c6/blocksuite-virgo-0.5.0-20230308090832-6594d8d.tgz","_integrity":"sha512-3dscUQ+tONU9dbE0l3Bd99VKPiB6cgykxrwibwHbsx4ATZ7VzTGUj/q4zaqk6WfDvvB3geNjX9b+t4Lr+rsu2A==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.20.6","@blocksuite/global":"0.5.0-20230308090832-6594d8d"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.48"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230308090832-6594d8d_1678266764253_0.6845137926701594","host":"s3://npm-registry-packages"}},"0.5.0-20230308232548-463df59":{"name":"@blocksuite/virgo","version":"0.5.0-20230308232548-463df59","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230308232548-463df59","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"7ba3b70210828a9328a9c71124f3072edb21889b","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230308232548-463df59.tgz","fileCount":92,"integrity":"sha512-lQ6BJx6meYcNe0ON155lomjWqDhqsXXxI0+/R2UpKDtCRrKjGXq4PsN/QjxWDCMc1fTaedRNSXBoO+mTzA760g==","signatures":[{"sig":"MEYCIQDU4MC9MLBFQkUivNJVwP9q0wsYk6xc/r1q5rUuQugJGQIhAMgFxmifxx7ViyrdvhE2g+eHfHQbIvYo6mpiXkwbWeS5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353455,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCSfZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrmDxAAjFL98Jqg8pQF0UDdx2amuSiZtn37YSp1GjVVK7utoNRpDGuZ\r\ntbHsgBEEpP84+8/ibnRXNZ3D4m8qUe50b5YZiNqukG19Da9QZkdNmBBxkL0z\r\nJWezDE/BzmZY/SMg/aqKq3INd4/5Zn6yq7gZJaIo/tgdLGV++9vEbmuPTQCA\r\nSqvkJfo29TEpbblmoecXXPsf2pd40B4XGRJFXEooKiFXK4jkHaAr9WgWcwmO\r\n/iBq6+G3VYHYBNWFatm8pthhyeA+EWexCJwFNhFrlyPlfLJKSNDaB4vlGvtg\r\nANFlxTQu7OvlpsY2+aFYlzGjZkZ4K/B2wBlr0p8mF1AUU1Cg5W+SFe7OufBt\r\n54zR3byOA+abG1FMnvhuT0fK5iLwy7l3EP/znzLNX8NkeMVNewiFDJZ6YFv/\r\nVmctPxSL8sr7drWlz4N6tcRfWTsgqh+uMw6NFsRFUTMUIK6sk9mfU83tklrs\r\nhjTLKWHxV4ThAHb2XNjs0dT8DlyU7UR+gzREwj+im+Sq6QRgoQLCCASphJRs\r\ncFCgJpSWWmpc94evVnltrmuOHH0G+/FnfYeh+z8PtipqpclV1jimFlYf6CMj\r\njni9jPOaTG/DOe6bNSwtc2R3YeZG0yQEJE+hURONoQiLLO5daBh0Ds5M96qZ\r\nV32pAz3e8sLWq0Y0xjV8sDkXacjJLLRBakU=\r\n=FgvK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230308232548-463df59.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/9ca5fe3d6c686d3549ba376bd57197b2/blocksuite-virgo-0.5.0-20230308232548-463df59.tgz","_integrity":"sha512-lQ6BJx6meYcNe0ON155lomjWqDhqsXXxI0+/R2UpKDtCRrKjGXq4PsN/QjxWDCMc1fTaedRNSXBoO+mTzA760g==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.20.6","@blocksuite/global":"0.5.0-20230308232548-463df59"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.48"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230308232548-463df59_1678321625025_0.009374058594746826","host":"s3://npm-registry-packages"}},"0.5.0-20230309082016-5a8e126":{"name":"@blocksuite/virgo","version":"0.5.0-20230309082016-5a8e126","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230309082016-5a8e126","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"10a5cf9b4f7e293a86127de340dbabe6c2811c3f","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230309082016-5a8e126.tgz","fileCount":92,"integrity":"sha512-WNT09NS3pEced2pOGjGRyNws4tnBgHXgJxkQKHSZn7JGvpvhFPtb6wq8PxuxcOzBS1pkVI5R2fSSm6zP90sLWg==","signatures":[{"sig":"MEQCIHGe853en1RqTYVcBmFB1hj71BM+4SFk6ARWA/Hc8dC4AiBMVNvFx+Z/sP4Ft6uV3Wz59pDvtbhisLDy4kc27jjGBg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":358064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCZdmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpE+w//exErKNmRZHhsEBXmKoRX18slkbj6aGhR2RbnldPjIzFVcdtT\r\nydp8+YjuqJdgsb7r0QC7uoNpk2XCWux4+TbvZJ2sdXg5CMlf78OtonbWX6+S\r\n36ECtKN5CRe+zheUYSKuw7tL/QUhRTxnLL9zeEI1rzL1mJkqCpKcnUYpuVH4\r\nsT6Ic99jV7CXosUv1LRbM9tqFjgorCD2C1T2IJ5CNKBoGwx24zvxyEoHlDos\r\n76ml2i22Fnryjak90EHSNPyzkFjuW3yKDXtD9rW3s+5g95qBlJ5H2N8yzorH\r\nK1Z1aCo4f+DNnYcMPCVt52ewSbO0SDHLKAwBPITO5uC9MHfwP5UJtt61oCeR\r\nLSA+sJni3ifDmKBIac8GTNRe8AbZFxpr+miAUkO8qSs5P/yWWV5ikHpIeKql\r\nEaBRRzWJkW+e6f1RiFqTzwsoXHD0G8IY1rmL03wI20eAy4ODF3WDNE8jBUwo\r\n5a+y+IkdUmCHbSMqR8pDgUm4tYFapRYiKFd63UBIBxw2pGfe2zqIIDeaLDfG\r\n6kh27YP4lu3zmm8MRK42YlfainI6RLfk9adnPppzQyQocmep4dDS6/EGEd/T\r\nEsrk6LxT2/Zx/kiJ4nNkNaXwanAHZoCs4JBMtr3QDY8aTqyH8ugQVH1PVpA9\r\nXmDRI8nZjeJTTF6HQpm6cLDuyUCAv15nyvw=\r\n=A5+B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230309082016-5a8e126.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/1638d502b9ef3ae60fb37da0b203f232/blocksuite-virgo-0.5.0-20230309082016-5a8e126.tgz","_integrity":"sha512-WNT09NS3pEced2pOGjGRyNws4tnBgHXgJxkQKHSZn7JGvpvhFPtb6wq8PxuxcOzBS1pkVI5R2fSSm6zP90sLWg==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.20.6","@blocksuite/global":"0.5.0-20230309082016-5a8e126"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.48"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230309082016-5a8e126_1678350182677_0.7819421861852585","host":"s3://npm-registry-packages"}},"0.5.0-alpha.1":{"name":"@blocksuite/virgo","version":"0.5.0-alpha.1","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-alpha.1","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"f17a873468a0f569d4fd4a91ddfa9a022a574ad1","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-alpha.1.tgz","fileCount":92,"integrity":"sha512-RnE0hgoqSnNdzOC0IUFuqabuW4yeKgCvxfSLDDeM18oce+MRJp5KQizcQ3Im8WRr76NTvMcoSibInt0kCt5UMw==","signatures":[{"sig":"MEUCIQCyTuKcGaIYSshLKN8Mu9igOTRJ+mWgxI3Syr1PCot9TAIgbrs2YRZxBg3Kh7N4cHCwxXNI6ZS1UsVa48GI5UCx7HM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":358990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCgMwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQYw//YNG/YpwqsPtdYHb9EeJyIoi4BmkmJsLg1jnATQrFILEqRFvz\r\nhUeJnUGqhX/gbpUWHZfvbQR0wsQy3ZBoAII9+DheOKfqfAepnYTDEEVoAsAU\r\nKrRY5jaseZIfX0IMQofTMyqfK/ZCFbEGvr7qr2fRJyXfGb0jqJ5iZGuL4zQc\r\nvUD93pq8/VUWtenv+H96wRlCU3NcgZEb2NlIGpU3HoX/a9B+Q6I7/+klYiwk\r\naaoX4UeUVU3d0E1TqCm30Gp/sFhBeDgyZNxuIyVHcQse/f8bGmaAdDdT5pmw\r\np6UKg2QR+gW18TeojiLjV792U0wXWMyGaaXFNcZIHmZJLn+lW2KypC/QUjpP\r\nOLGf5DNZ13CKE8HRmc8v6Ifrs4ti/KSyi2KXoe/VUcxn0y7nHqONcd2mDnal\r\nIVGTpG6+ShP/nybamm0JBel4KUYVF1D+VEenilUTHQggwuTsbiaY+ooBZVFl\r\nfo/HKQnWco9xP78Otc7EeVIBROEQobMszsdBSeqMrT+dTR7bQgFnEU8t6fUI\r\nNMaN583IJ+vVLwq9Sm/bg0n/yS61+eWxo9lXwQq+ICPkQ6ZOkFArvugcxK9/\r\nQqRu8168LSKdA7DJopyoIeBdOaJv9jbDAtXDBQEz8hqALRPK2a8t2qVAadSj\r\nqX9Kg5CBDT8ra6eICXx5oWVJYUCDokXoBX8=\r\n=wIrx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-alpha.1.tgz","types":"dist/index.d.ts","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/72423b14711b75d6a9b4a1cb156887ed/blocksuite-virgo-0.5.0-alpha.1.tgz","_integrity":"sha512-RnE0hgoqSnNdzOC0IUFuqabuW4yeKgCvxfSLDDeM18oce+MRJp5KQizcQ3Im8WRr76NTvMcoSibInt0kCt5UMw==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.20.6","@blocksuite/global":"0.5.0-alpha.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"lit":"^2.6.1","yjs":"^13.5.48"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-alpha.1_1678377776632_0.11603675509816602","host":"s3://npm-registry-packages"}},"0.5.0-20230309172823-10ecf66":{"name":"@blocksuite/virgo","version":"0.5.0-20230309172823-10ecf66","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230309172823-10ecf66","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"fc16bd40e8a3faea4229416588c8ee557f5be28d","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230309172823-10ecf66.tgz","fileCount":92,"integrity":"sha512-MeR625eHNKg6HnDAsamuVUzGxxBZEf2VvuRLeDoTJTkWXhDh2cOD8xTlQ18VGhV3W3HnVJGFSbEeYp9ymwOrZw==","signatures":[{"sig":"MEQCIFaNqIoG0AHoQyeMbIV8vJiiBBB8CBDDMsuUIy8N2mD8AiAwJXxPBVr8uc8GcIcQEH2GlU6PZfHuSUSijMXGEZQlRQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359024,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCnlEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqEhA//dN5t/sji2JFdxMRcG+vXh6eAk0Qb0ut2+J5kSluH1n4mjk8x\r\nq221tERnGyjMNDFfmnZ/OG/yaaIHZPXMuh77d2XE0gY7jGN0bJGGv2uJixKQ\r\n3lQNql1uefMYk9wFKwccTbVZcJJqG7kjVjCdzha6A7pVJKpImcUMcdh6SLNG\r\nJZ6AlXCXyWk+joJ2wSNu1R/Owy6P5qEgpEXoXrP9fU/vLJK8DgCv9RZITn42\r\nblakbrhh75kX9kI77Uhhq4Tkv0Qf/AGH7entKMAogCYU+zWIXfCxqM2AXK4P\r\ncVU5rU0rhjUhKFrgOiQxqKKkxZ+aUV6XPK6meZxpCo07ik1WDlwf1GM1eZ1r\r\nABjOwaGmL5s/bPqTMwsSA/B00QnoWN9jjBvK8X8fwUTSpDt+AYImQQtUsvbY\r\nv8pJ8YZdZe9+nMRUQSrdJEpzOnV6/r6mTCgR+RJEKeb5sen7nHTrPLe6RIR6\r\n4o7Kn0LK3G1QM7nCjIQrcI0OjgPhsDSp0AM+yZd7jwPZcLfhsmT1Z3pY6Z7U\r\nJ9wehIQRXsAobd1HjQzHvRh92Mrkp0TkSVxYQ2hjzBrvmwvsDMbsXFmcpDtg\r\nIOYiuZjnlv5LhagR515jTiX+bgHGJ0EqtX/Whz6U9t2T6dFZQ1MzIrDKtKJj\r\nQQCaOBNyfEVmZcFiAf/YIVDeNL/cZ2edMb0=\r\n=+/n0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230309172823-10ecf66.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/eab1a87889eb10218190b3fcc97d37a0/blocksuite-virgo-0.5.0-20230309172823-10ecf66.tgz","_integrity":"sha512-MeR625eHNKg6HnDAsamuVUzGxxBZEf2VvuRLeDoTJTkWXhDh2cOD8xTlQ18VGhV3W3HnVJGFSbEeYp9ymwOrZw==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.20.6","@blocksuite/global":"0.5.0-20230309172823-10ecf66"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.48"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230309172823-10ecf66_1678408003971_0.052173146844253004","host":"s3://npm-registry-packages"}},"0.5.0-20230310062711-a86b71f":{"name":"@blocksuite/virgo","version":"0.5.0-20230310062711-a86b71f","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230310062711-a86b71f","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"0b7e2b6b7690f3c28fecb4130c1f87ddda0f801b","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230310062711-a86b71f.tgz","fileCount":92,"integrity":"sha512-gEOg9ynThDfZJQijUzS0if9DBztLmfKoxq3eCtxCCL5ZkdunG0bRrloaaHJOUqEjisGtzB06WKmJTFfIJ3CVww==","signatures":[{"sig":"MEUCIC1VeNmmV7So2ehQWlo6av2fD3y2zb9OGvj3IvVxfXTMAiEA3zLZ2yaUuqAZIxFxNK+qtMTpyndDbGHxJu9LRiE1Xos=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":363157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCtIhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJTw//TrDTYR8U/dJd+78vMuHbFeqgSdjSuzmnCTgwwyi0h/cxcpHS\r\nFiupPSRRO6pcxRtNPcUD+k8A+XuhjY0aw9IXU/00+Nc0G63k/QUFqLVxkgNi\r\n6wkGrdVRc9Dhn+Gb+F5qngDmp/v5g7IzranozuMFic+AumBvmNIaIb7j3GaC\r\nomfmFw0ZIyZ3DeildHYoRnONPQWjJfsK+amxPvqZBfejSOU4pNQOZz1axFOi\r\ndTf+fGACN5gJq9WcVoEx3QFu7Erj5/xDwYcBd/jR5zEEa6swWUO9ejCBursy\r\nd7WWlqbrpl/5yRqh8Ia+VuENaiDTPWCEm3L8icLSNG9pSAihLinDemmqO9qo\r\nD9ZTXYUsxUv4NnVMXHXDG74Kk80Pdjkyi2kDQ0R/nrwtHskYVZvB+782Urzz\r\n1sXfsubzAFmXe4tm1BdJ4rxAsKBfJ9Q/858hW5z0HSW/t4cQ4YENuzxIKGbN\r\nnT2ztA0eKtuxBkzyeiB/ysSCpnq1oDXRIlioOTk9LRpS8+Hx380bERw5mm61\r\nVQmDzOnoI054RJ7a5u6pgSI2HcARuJho7IGZNcYwhUkxsGsHILl9Dw5LoQRc\r\nJpCNiBD4UCHBURUlMuAIqWB5aS43/DTNKFrHSdP61Eh+AjMG8KMeWaBK5AoP\r\n1xI5Lwgdx+r5dDUImoOtRXS0XGFwGHisZK8=\r\n=2kBF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230310062711-a86b71f.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/2a43285059554fed63f660b9c508e5e4/blocksuite-virgo-0.5.0-20230310062711-a86b71f.tgz","_integrity":"sha512-gEOg9ynThDfZJQijUzS0if9DBztLmfKoxq3eCtxCCL5ZkdunG0bRrloaaHJOUqEjisGtzB06WKmJTFfIJ3CVww==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.20.6","@blocksuite/global":"0.5.0-20230310062711-a86b71f"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.48"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230310062711-a86b71f_1678430753655_0.8304531094952143","host":"s3://npm-registry-packages"}},"0.5.0-20230310090329-2ebbde2":{"name":"@blocksuite/virgo","version":"0.5.0-20230310090329-2ebbde2","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230310090329-2ebbde2","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"2f48166a6f4ab47812f8c3b3655801166c8466a6","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230310090329-2ebbde2.tgz","fileCount":92,"integrity":"sha512-jvoccEMPuTyndLg4eX0rHZ5Y1ye4fC+UW5FQiaevJo8pNn0ccUsrsfqsfzoTAifJmzQSHMHZ6TntnWmBFcJ0iA==","signatures":[{"sig":"MEUCIDvGncHJnqX+90VQkIxQC+79KKEtO66tq05PwcCvVrcQAiEAyVGEDORCGXq6y139Dcqu7sByCOTZzOTib8hrYSIhf1k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":363082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCvPyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrGyA/+NCoYV6iNvGrWXrvDZxftm6MunxZVWcwTVlaNSbOHJEHbe0bT\r\nd0nKoVztUWX9I2AGl5ZwjAQ4EVOXA44c4lgxGXeAC7e6l/xY/BYjAfqgGz8g\r\nsUNgzF12lpYhVyvwD/SGjfKUfXWqAxA2AybZ77f4POV3xlnYDuOU5Ld8JZXe\r\nNqRf+x9jNgi0sFy5JX3CpRNBB8xGbIOdSBU26sdaDsTR3xCOWQVs4TfCwCh7\r\n/riMSaygTAbefFu9Yu2xzvSgmkSlL8tJ5Nk7dk7/XBinLhIvfp8QU1m1LVA/\r\nWli3l4rZYEYnXsUE+tU+8kdNtlKfyEy15yWqM+XMSzOcDM4Gc3UD+zul2tAb\r\n4sXtBYO52oElHLLJbmVQ50CBmoOblOTPcItAWWrAajqAmj31wHqEaI2weabM\r\n3amPhCz5hkEAL59BzGycDSSWVQEIzggddsNxw1rfG51PkEfyarqjXlWUBFCT\r\nMByNWnajjtU+PhyCXWAgTWoWrYQg9mu7f9HjmHyJX+Q+Tz9l2FkXzulKYwSu\r\nZFM8jGzOVx3N4dDCnX2qqCuR1pr66MfTLwJJbN0s+0gYbwndp46Gm+P+8AwF\r\n8Su/vyRXRpKET5k8zUj833/hWF8D9A0DaXiRcLWiLr94BCMUqjSkDfOcghSp\r\nYSZ4kTL8JTtFJV9Nle1sCG5Bxig1BNZNSwQ=\r\n=D+wL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230310090329-2ebbde2.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/e59a8170146b3a8546b249b367c1bbef/blocksuite-virgo-0.5.0-20230310090329-2ebbde2.tgz","_integrity":"sha512-jvoccEMPuTyndLg4eX0rHZ5Y1ye4fC+UW5FQiaevJo8pNn0ccUsrsfqsfzoTAifJmzQSHMHZ6TntnWmBFcJ0iA==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.20.6","@blocksuite/global":"0.5.0-20230310090329-2ebbde2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.48"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230310090329-2ebbde2_1678439409930_0.139314380281911","host":"s3://npm-registry-packages"}},"0.5.0-20230310095333-5202fb9":{"name":"@blocksuite/virgo","version":"0.5.0-20230310095333-5202fb9","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230310095333-5202fb9","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"f97d4597ff28b44d9b86ebf838aea0864d6a852c","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230310095333-5202fb9.tgz","fileCount":92,"integrity":"sha512-Y69r4nCtb+oLl2TnWsvo/OuWj1vm/g3nOnRrwgoDMWFJXxnLwzKnZ1UAFQi1mQFXugrqDpOb8xajZOG03Xcb9A==","signatures":[{"sig":"MEQCIGkxNnSGjqKzt3urMXXfs8+/RPlc76ZhYzP3BCWB7RVdAiBZZfKVjpcsI+fejoPWCB6fg/aytwaNKOOywL9D+xNj8w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCv6/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoDSw/8CUsaXg9X5A5KZXH1QN/W8p9v9HPrMhixpcL7ChdV164vyc22\r\nUyy4OcdERuTgUmo01W3Qz4m2Xs7TSjCT1QF4RStL9P/AiRFdXUVeMHhN6PoB\r\nCxwLj6Z9wu8EF1Jy1pgQYGDbMycBbZ5aKORPpLnoiqOPpiQUhtueHN0vA86N\r\nvP1OmsqsuVHFDXtxtnQ8LuTZiomqAEmXZs3LXt5oFWCGE3AnGrRoZB64R4ny\r\nV1W4aqxS4LF0JCqQMvwOFG1kTO4QPN2f8uD7uEu3XAp8xKtVrWYY1yYxRtXa\r\niOUfXO4cqRoT/AMtWsCARpPBLoFiIHD8UilAhb4wRIp0ASjBYwfdYt1Gnr1o\r\nBXQwQjbA+C+GBDDGvyjiai0sgMMUrqoE+Dtqo49UgwuWoDcQrqusan3muylC\r\n/YLa6h2oiT2baaOvajysRHI6hSWbIat8qHVi2yhkFFCjcGjDTz3X3ysr/aRb\r\ntdD7mdhNeJX1iA9G/bbkhMdvRGoH5+xUokM+MRFbwxoUCj1CnpILd4mAw7nI\r\nXTJSJJlQH9Tq4+ejqV4OhM66PotXGPFD3kKUDmQrKL4tGExjcqcXuHGHmBR+\r\npyMzM01ubEAQaYF/r14+pTAEDZLGrmGoA06ejNRqXWutMW7lK6VtbYhaBR+Q\r\nulE+WGjDOb+TF2aaIG7TwuuVHG/QQtUkzV0=\r\n=0uh5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230310095333-5202fb9.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/62e0432915e9ebfe8e6dfdb329fca8cb/blocksuite-virgo-0.5.0-20230310095333-5202fb9.tgz","_integrity":"sha512-Y69r4nCtb+oLl2TnWsvo/OuWj1vm/g3nOnRrwgoDMWFJXxnLwzKnZ1UAFQi1mQFXugrqDpOb8xajZOG03Xcb9A==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.20.6","@blocksuite/global":"0.5.0-20230310095333-5202fb9"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.48"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230310095333-5202fb9_1678442175350_0.7740603454776198","host":"s3://npm-registry-packages"}},"0.5.0-20230310132906-cc38585":{"name":"@blocksuite/virgo","version":"0.5.0-20230310132906-cc38585","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230310132906-cc38585","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"4a99c42a0f866e4461ef572f4b417687933d0382","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230310132906-cc38585.tgz","fileCount":92,"integrity":"sha512-DqJ1j96Sv0zXwUpO4vd2x7KkOBhEhYKIDmFA0zdWB8ueh2I2ACfufA+Mx4dVZD4GBCVYr7z+tUfJ9gOuHfvWeA==","signatures":[{"sig":"MEQCIC56Tod3+Y2+hRB5SN5/tydopM9SKT82EBk4iWLrEQ2VAiBoui012qURpPbwVOHw6nHwTo48SMaxT/MD4mk8erwDEg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364394,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC8nlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpoJBAAik2tOqTo7VVQy5bbzxuyw8K3rbJdyN8qMwwOwFMLw0Hj6LBO\r\n8yhdKMN8fdfQu2zJchfdQ3czFvAriMGYgZ5aQ+7UsD5OBmMjCtlLTu/Jy40O\r\nxEwx/lmd5aMeFY9eO9cm2SleQ7r6Xdyf0mzBT+cYJsdXV5hlmVhUdQr9GOd2\r\nTuY6pPX/nSFF7l0iaX9oEZO6EBg+l3T4Dbz93+5mullSL1fTe40R8wdH2R+C\r\nru7ur7efJ6ACiFq72M/9H868NFga9pO/E90yYlcIxHfeMSvbYbBjDA5/j7pi\r\noaKOlyUXQLuCUvGUlUzsD6kvWXR1zUR0noiNlt2sQgIfkcy6dJjLzlO7mg21\r\nYMPlk7W2YJ1zF2C0fNEKl3BDXOCluxiBqUMzDsM+uZL6W7Xguo0BSAx4NR+z\r\nxiqM9MJzl35Yqm53kzLN8E2nt8dTToCn5xKi/hVGIfJiatsK0SN/wuPBljkP\r\nm5fCjUXJaamDiAnqMJBetKy/GUdhUVjwi6FRmXEo+DETvfEz4UNAryzGVTbU\r\nIF2aDCw8LAOqVshkGY/8zOVrIrvZ6609xF0xz7Opj+xOIyBkawbOshOF7Z7j\r\n6Fd9jhBCEKVDBYjt1n8Qhi9XNLlYjJsosh7kizFr79ugr/rUYzE+Q4bED3Lg\r\ntSMXTUoB+xZ+r8c7eCR2I3/UizhJ+kG1tOY=\r\n=CZ4C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230310132906-cc38585.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/7f4c703e60b7a0b9d274036e1fac6d58/blocksuite-virgo-0.5.0-20230310132906-cc38585.tgz","_integrity":"sha512-DqJ1j96Sv0zXwUpO4vd2x7KkOBhEhYKIDmFA0zdWB8ueh2I2ACfufA+Mx4dVZD4GBCVYr7z+tUfJ9gOuHfvWeA==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.20.6","@blocksuite/global":"0.5.0-20230310132906-cc38585"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.48"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230310132906-cc38585_1678494181028_0.830281367333739","host":"s3://npm-registry-packages"}},"0.5.0-20230311151726-8b99e2c":{"name":"@blocksuite/virgo","version":"0.5.0-20230311151726-8b99e2c","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230311151726-8b99e2c","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"acf31d7df37ff10c6ce79a0e8e726d16e7b38d29","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230311151726-8b99e2c.tgz","fileCount":92,"integrity":"sha512-qUp5fxgzPz5Q/u9sIIWff63CFq4NBY1wrIp/l9aMsk/8gI3ZYORdFGFfwx67JBuQ8pxWUKSP7+pRGfBy3w6drw==","signatures":[{"sig":"MEUCIE2zyiVkP0U42T+Kg0nJG/o0ADD2MnaVt43pL/TYY7tBAiEAvdGRbQTx913fH7JrzI8N9z2V4vePIkWkx0MjzswnUYU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366674,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDRw6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqGbA//fRaZk5E8WBCgIxbPqCkcvuIfdlu4crTqVf6JFO5OdVpos8y7\r\nYoenUw72ALOcAJDbJQopfNC7LECZ6AYvunUx3pMz6fEHUvOT2hprp+FvcTLQ\r\nYFAcSDKJHJ/H2aLy08f8VZyuN1FNr4ku479ly2nIrwZA/DqG42+XvVdcmuyz\r\naFuYtoPc3U7pRcXyidijCWNEZ1m1kdwVhupTn1vlEymCme43M9QL/MFDQt1H\r\nkyB4GM1BQ18AC6ihT8nN2+L/AzZP8SqCWg2hkt7nezveOkTSI200pCpsEMgj\r\nNzw2z9s1pNkzfGaK5BaJ7rIoAiUCQBAFNJ3WlgXtyMWwAaWpiZlRN4yZcHGS\r\ngeU+WEA18Ar/seE6j7SI16r6iRLLyvpXYL6MqUsehmNTxwFl9qSbtlAhgFd0\r\nSmBJT+nQNTS8IGUs1g4UbgBclCSjyNIzMsOdykgxqjt66PZaG6D7CfvVOKzz\r\nB35mB6O0xJf4Cd/mV3bbTzkxy85+X4lt7jos1UQIHrC47UDam3PpE7sYw33U\r\nK+W4R2ueJfVfi0K/6AMg40Zf3TCqR5ODnZXwRXKJZeakV5CcHcF+KTzz3fpM\r\nM2p1UxdTLNiZeqIPeEyGrBq7df07yxQwoDIeUVihkUlK0q1OhUrL1ynELw6l\r\n2IClyaMlOXGn3zPvMKKX+Gq0tISUq4SEz1Y=\r\n=3bqs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230311151726-8b99e2c.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/042a1c6f5955cc890924d8269acd4752/blocksuite-virgo-0.5.0-20230311151726-8b99e2c.tgz","_integrity":"sha512-qUp5fxgzPz5Q/u9sIIWff63CFq4NBY1wrIp/l9aMsk/8gI3ZYORdFGFfwx67JBuQ8pxWUKSP7+pRGfBy3w6drw==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.20.6","@blocksuite/global":"0.5.0-20230311151726-8b99e2c"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.48"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230311151726-8b99e2c_1678580794497_0.4325617956713288","host":"s3://npm-registry-packages"}},"0.5.0-20230312174558-52c15ca":{"name":"@blocksuite/virgo","version":"0.5.0-20230312174558-52c15ca","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230312174558-52c15ca","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"b2c64cc2c4532372f0915ed2a0fac5f98d8631e4","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230312174558-52c15ca.tgz","fileCount":92,"integrity":"sha512-piiq5oF/m0OGD+F1pAqhytszPQzHjg/0wnj9ZYMKHSW1yTCnG0Ou6jWUShmATyv/ULPcdRfyEZX3TXu4T9WQWA==","signatures":[{"sig":"MEUCIAYLwYRXP2j9vlBkSOtoocmSfQV0OpLx03qjIgwwr3yJAiEApnywMpiX+g178fRCTS09QkQyzK2j3bVkFe3l1jVsF3s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDm2nACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqrmg/+OO14WLpFkiaPBA4eSK4VdwIqoMdWjk1LLOH3eScA6wOorcpU\r\n2jkEBcZ65DKpzi5OaH83EMylP7McMQri9f77eHgX0Pwq7GY/X2ROaosBKzvY\r\nZma4V1xPqTSFBicxS1uNlgwzZ6JvjR6MRSjim0Isoo4IOhSnqSymMHZ4h3zh\r\nOrE3RbMfNm4kqPo25ovydBboAuAFx9bcghv8+pxlvkwmH/DzZ4m7BiXYbA/h\r\ne+FTQaqIe1KvX2tbnA2CLjQWVFNPlKRzJNHZUS7YgRgJJhS8p0USHl4W7e89\r\nn4JYrc3DiBt0BB/X1LNzej6Gl2NyG3wYlb7sAx5v1n40LhpKtzrPr2gEYhnp\r\nJul3z1TNqCwg7J/W64fM+MGkieHP7yV+1GCz2cGicARuEaN8Og7i2zjmXEUT\r\nE9tjEuP3ZhFxX4g2oVgRlBtt6N67WrTFzWpqPAaiG3pRGGNVrM7TvjIhchOx\r\nL1UqMkgLYHnUOY9neNsKnYUZ0Srbmhb3i8QmV/QQMMV+YrDxv7IMQWheO6Nm\r\nz3jSv19MmVoal+Ob+JsPNzeywKpfLP/lzrDyvHe56Y6L4uRnI2849Uqotsvy\r\naxs5JuXMmdwXMMk1yWjrgwpaK498petSLLoDykiD8frnm4YUygaWDMbxrVWh\r\nn0Br2gr0nr2cWwS5UBB/BWDnlxR+eW7skK0=\r\n=Sfou\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230312174558-52c15ca.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/8bbb7d5a010b3581f561da4b3d30bc00/blocksuite-virgo-0.5.0-20230312174558-52c15ca.tgz","_integrity":"sha512-piiq5oF/m0OGD+F1pAqhytszPQzHjg/0wnj9ZYMKHSW1yTCnG0Ou6jWUShmATyv/ULPcdRfyEZX3TXu4T9WQWA==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.20.6","@blocksuite/global":"0.5.0-20230312174558-52c15ca"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.48"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230312174558-52c15ca_1678667175130_0.6443969539511163","host":"s3://npm-registry-packages"}},"0.5.0-20230313100532-099b92b":{"name":"@blocksuite/virgo","version":"0.5.0-20230313100532-099b92b","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230313100532-099b92b","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"85c608e356bef9dd51c23b2fbd7c0d2b257d5b0c","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230313100532-099b92b.tgz","fileCount":92,"integrity":"sha512-xGezudrkVra13mWD+84oVPrhaheiJfWwXAUJrxFgv+CRvaXLurEbucFY6QtTQYHsL2pLakcBVeoK9oQ+9LRswA==","signatures":[{"sig":"MEUCIBks51+S/qBJknqckdfTwZaSnDqdCQVjxPJe4r/OVk3aAiEAs2Sc6Ju/uIMvsG6oNlzKQJsdSTdjlPsiVP9c72B0GrU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":367989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDvY7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmozmg//arpZ77798hxGZzAEigCU7fcWyONyH7w/IHxOJiu4gNdLp3d6\r\nSkuHk0Y0zX0kfrHZHjwWH3YMVkcGY0j2WhvEzdxPUJZ1Bj9yJkcmh44CzEqj\r\nqk+nu70gp6hymVVGsYcCswLU/y7CP2dOuTA0Zc9I9GzGfU7QdSSLftuLqr3p\r\ndC3gwte6cJqDyK2Y+P+wxdDddifI+eYA6QmbEUNETLoF7WZqNLz4CA0DsHdX\r\nXo5IjW6kl0Iv2EGZt88mMOIaTSeKsdNZFt/05R/RONNXyVPrZmbz8Syt+2nC\r\n4Nrg4mJ5SV51YhjONwB8C+Lvg7WRTCKZiN9gvh48q/ENcaD/+SV+IvH8r4F9\r\n+V0Q9Gn52dPAowPn01TQ+NtpgH76IM93HUDOL3RlvLJgc6yzz9sjWqX3S8mY\r\n+3BuTcB4ERstwbNAFEYsXqTsVYBk3AEujj71YYo2jpY3doZfBuArcxbLNuvn\r\n3lUovLzbKeW4l1NTfyH0maYDR3J/sBPx55r2ZaIsioAK9GjiIwcxJ3s43P/O\r\np0E2HaOvPAtox+KYunTGQc2Ko7gs4WBsfK7iOBY+bKhQBXblR0AsBdjP9eRH\r\ne5Tki6nFquAJKUWM3zcCWKH4ZCKjO44n0dzqNyKS/hpPy1/nUs2hZmR2yGjQ\r\nsjia5GOYHxFjqqWG7P5J8zeJGB1r7J0F5KQ=\r\n=y8Op\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230313100532-099b92b.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/100207347c94c8f56bd15ccc09bb5b65/blocksuite-virgo-0.5.0-20230313100532-099b92b.tgz","_integrity":"sha512-xGezudrkVra13mWD+84oVPrhaheiJfWwXAUJrxFgv+CRvaXLurEbucFY6QtTQYHsL2pLakcBVeoK9oQ+9LRswA==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.20.6","@blocksuite/global":"0.5.0-20230313100532-099b92b","scroll-into-view-if-needed":"^3.0.6"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.48"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230313100532-099b92b_1678702138981_0.5006912102562104","host":"s3://npm-registry-packages"}},"0.5.0-20230314083023-ed7a9fd":{"name":"@blocksuite/virgo","version":"0.5.0-20230314083023-ed7a9fd","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230314083023-ed7a9fd","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"76835718e91c87ed6f987217d3347cb17a37115a","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230314083023-ed7a9fd.tgz","fileCount":92,"integrity":"sha512-9/SQS//H+whTnkOzGLQiToXADzUPKRpcrhDLHZTPMVyX1kboyCsjp1lz7TEvPsuOZCMYx6TE1mB2g9PqGq58Gw==","signatures":[{"sig":"MEQCIEaYsc211zlb2SeaI+0C9h8nHrpYSQBe46H0/ZGwxzT7AiBoww6MVVImCtJ+wC8bUppBMyPuxvRmWX6VlRlDyVlR5g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEDX3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp6xw//fq5Xxffr76j9OUDWEYU66sBJ8o4VvcPG0U7BFsGr+pckHN9V\r\nEn9DGPt0RGE7/Gsj68jbhPrnCkZAvBIqSjPrNM00h8u07EqlwqYXmetOBsdu\r\nF7MJmlwIGNg6MSvVvL9QcPhwQv+bqlmwSi3hcm5xHHNwtWK3YTX6ZKY7D6wp\r\nZ/hftn9qfvDRQHYDDJGPQTQq6FUjtvt0JGuDnfAKJzeWqPmKI762zwuHWPFY\r\nN0QSaAUZlE4lMLx8wF5nIFxPbmrfgB73Z/H61Z9GWMqdxzqcV23pHkSDccsj\r\nCuvmGgULqAM8OvV+bLwS1NxFNIPsZGNT+Nq/GuQT4XugDEMloSL2WVGFFpNL\r\npJO3xaodgYAFnZV3TS7paLYm0ZrCBln1l8z49dgAULq1Qt0r1dv6l2BOY7Hi\r\n2kBytghB5BekN+dJAPfnct2bkYDDN/PULVEppIr6g8DmlbBlC0YBDRLURr00\r\n4zrh6F1ELPRMcfGG2HXfvXPTkLzav/ZuuamxfGS/MxCq2ok6VdVxu3GIZJKa\r\nnhuujANQPD3UFVtxYyYul2HNoyUIe0G57UJfr32lYJ+rgMas61JL6A/AdGd3\r\n30NaeqTJ00onqYehmQtiyQwtFrL5cXRzUgV5Xxd3KV18M1ZdsfMYEZKe78nX\r\nMNBtR3P6k0cm62r7iyfRcLk7D1fLHf0bBAQ=\r\n=ierC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230314083023-ed7a9fd.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/2ac08b96f76822a7c49d30c3bc2d1c68/blocksuite-virgo-0.5.0-20230314083023-ed7a9fd.tgz","_integrity":"sha512-9/SQS//H+whTnkOzGLQiToXADzUPKRpcrhDLHZTPMVyX1kboyCsjp1lz7TEvPsuOZCMYx6TE1mB2g9PqGq58Gw==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.20.6","@blocksuite/global":"0.5.0-20230314083023-ed7a9fd","scroll-into-view-if-needed":"^3.0.6"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.48"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230314083023-ed7a9fd_1678783990887_0.0696734549376774","host":"s3://npm-registry-packages"}},"0.5.0-20230314182044-9df30f4":{"name":"@blocksuite/virgo","version":"0.5.0-20230314182044-9df30f4","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230314182044-9df30f4","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"ceabe09fd828f6152a25710139bfbabc7f2aaa95","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230314182044-9df30f4.tgz","fileCount":92,"integrity":"sha512-cnUNLoyXlF7RS8jNZtzG5Q5KDpDRc4YKNlFbTlZ3+HH6XhPmGX4H0VBX3ee+pkfrJeeqpQUH88Y2IsLDZ1+EeA==","signatures":[{"sig":"MEUCIFh8Uxl+OO5lJOB/YLaL6q6ny5eoFIS9zvEOvmUFpxSMAiEAuUS1RlzU41e3qz1x36ZTmBmLdbkEo97S/hFp1e6QrtQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkERCuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpe/A/+M6t6lc7OoYwQwk2Bq/7C00BfnxcynTky74IigK0UaeaCjgKA\r\ncYL2dplhUfdGLv0BURRIZchgm7WDvqohlIz/FZhdpMip+IARTETdgKM05x2D\r\nqjQGPsN6hBCpfhE2adjnzI936lnh70mVCmgFd8fTvWaBPy3X/J9Mk9K0hW8q\r\nzp5vFzJK0xG8yG4LP6FAVfqXGQC7xgoJumbZum0woA+W+iU9yk7zl58FqJ6O\r\nIzR+MlOM/3qXTXbVMP8z4TH1GGzISjBpr5UAZvxI4V1nzdhsvVCnvEpdiW04\r\nPr6a/StpfD4vOjlHRxPszz7M95Qq9th0d6rO7MA+sSsx73TYL3qY5dxveSm9\r\nCghptr2Udm58QTfQSFZt4vpGA91H6H+RyEGvGskKesiTbrvNON7DwCNmK2k7\r\ndxBHOb21HOelGDhrA1zxHbnaqIPVuh2e6owBtL4GfvMN+f6/nfeB5S/9EJ8x\r\n665xfxpqBF5f6kuVjenjpBnnCti37vICnrhyy/6yeLmjtBWvAtsJG2vYvUlQ\r\nBl9Me0yxXkGjxxCuAZ1pHgm+m9NagSi3L1OYZD7TkMnHx/FbFA79IvWa7n6Q\r\nVlhlkqWrjDcTce+qej79rKCKDXrbHkRCqEl8JZ+rD0a+FYdr2gjsxH3YQdR/\r\ngtInjO8BvA0yVepw7PTZMjaf30/FzaW4xn8=\r\n=+kH+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230314182044-9df30f4.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/2e82822aad92977ccb160e9aa4219630/blocksuite-virgo-0.5.0-20230314182044-9df30f4.tgz","_integrity":"sha512-cnUNLoyXlF7RS8jNZtzG5Q5KDpDRc4YKNlFbTlZ3+HH6XhPmGX4H0VBX3ee+pkfrJeeqpQUH88Y2IsLDZ1+EeA==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.20.6","@blocksuite/global":"0.5.0-20230314182044-9df30f4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.48"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230314182044-9df30f4_1678839982533_0.375610833847724","host":"s3://npm-registry-packages"}},"0.5.0-20230315153039-983040a":{"name":"@blocksuite/virgo","version":"0.5.0-20230315153039-983040a","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230315153039-983040a","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"2bd634976764b4194e4925b3cb3fddbb65abe84f","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230315153039-983040a.tgz","fileCount":92,"integrity":"sha512-+aTZ8Rv0NLM4QclLIKpCu/zCbs1EMYXklfERlsLzLdq81QWZ2iOv397JQWhACSJpXShP55nWyJ8uI79U+CAJZQ==","signatures":[{"sig":"MEYCIQC9pDzvifnRACAO2xDR06hj/0YNpagi0RZo6XaEYyulkgIhAIcHEd1D732OeYjvuOTwZBkOps3FfGLoMpxebDr1xjDJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEmJfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoA8xAAm/cg0IQUqG0vh1sPyoxjqKcTac1Orz4fJn3wzvjtwMULjK+g\r\nkewfEWBvtl44XKCIFos1vyXctrhNIoR08h1mGGaE5n9WkENG941wEMR3UR0w\r\nitWBleJeYQ0KYX40wHjzVSzsd+ZvtEEUUKhncHBRpz/nSpjGQ3k3tee+W6r3\r\nQnBCPYCwRsuU4bNpy6l4VJESSnLIBtFaIMyvPdZtghi4QQwvTYbxjN6zAWKU\r\ncEa4DPg+BV7qOq8ToVc0T5DpydNrCTEK7EJAm51MxsObZVAsKQfkkr+pYqeq\r\nwqB9tpRDS8zJoRUJC+6HK7zt7kNf8mnrxpGZDPvyiv507utOndmukSjngJq7\r\nAST+wIYXPzJ7feBl2Xw43+g2FphdQUY8i+cDOwac4pWri3GazK0yqc+7L3eO\r\n13iZ9jYW3Lpkubxr9iSFYxUPaWJ0eVzkpszDhNyCdMa25a7xisSbhkrlZCBy\r\nu4BF7c8D+CcLr6SzUPHYCEjFubbye6EP/afIPVjlmB+tZAQOhZt6oPia0kMW\r\nUAA0vndojRtp1u7pC+298Av+76tgbr1RjuExb9MkMvA+jk9YV3Ki6WAiBCRI\r\nksDaMFkWyB+lwtxHQkIw1P2l+9N+8uE9Z1iFGb9xK8e+4CoMhXV7nl4jzHKb\r\npiivNmofFGEtaOAANAGrHqq0Dasi4yYHmqM=\r\n=9TXO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230315153039-983040a.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/89c88a1424d972509d509e2951e8e724/blocksuite-virgo-0.5.0-20230315153039-983040a.tgz","_integrity":"sha512-+aTZ8Rv0NLM4QclLIKpCu/zCbs1EMYXklfERlsLzLdq81QWZ2iOv397JQWhACSJpXShP55nWyJ8uI79U+CAJZQ==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.20.6","@blocksuite/global":"0.5.0-20230315153039-983040a"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.48"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230315153039-983040a_1678926431474_0.9236865298062795","host":"s3://npm-registry-packages"}},"0.5.0-20230317001802-ebd1fa9":{"name":"@blocksuite/virgo","version":"0.5.0-20230317001802-ebd1fa9","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230317001802-ebd1fa9","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"a780e9b54484d27a22de1b11871e03f477f2dcb9","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230317001802-ebd1fa9.tgz","fileCount":122,"integrity":"sha512-Za4uVotqzOEebuxUn6wdgDZ4KuqZHKKOYUYCOmvnJhb84m6YzRT640yPVy0TwP3OMQAHJr8ivesO434q8L3yRw==","signatures":[{"sig":"MEQCIFHfPYZwPfId9Td1jrmUmdA1jL+odpkIZYsJlUQs8hq/AiAsMQRYZ9pmbcVCCmJqBbNwKir1xeISX5RNRzuPXWVoSQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":406914,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkE7ONACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrjMA//cqEYL2E4C+Cs01C1hdYyyhvbuKCJFQY1FVew5I+QiLSfDBAy\r\n4dkqD7DWNVjfY5jMleYdJsOz+oq0LyeDozmgodaMCJyjj0KMD06GhVkUiElO\r\n5t+GLQO6Sab/twWQsOwqfLEDOX1pN99FFA+QevXVUiEOo9sUmipKn57YXAw4\r\n85k78yaj/wZICN41JOKsQPrRgYQjtvVBJWIKmUgAFucw7oEIdrSfg8URwd/j\r\nJsDuqDdr+1pUt3sQa5XwtfGGh+yx1zn7Xn5hAtAxJ3vNtF8oLqezTbNXjisE\r\n5gJ6txWn8w3Pqa2u2ha9VkVq8yBRhAH4yvZgBr39cs3WAuLpmfc7eSpk2oz5\r\nFDaqQ8xXIAD9nWsQi9N0WQSqAR5Kf5242w0K+znR1oevKuZLBQjDnvKPDLCK\r\nVUffIzgavnFv+JxLfbkgLQWYxUJxTscQihvvoSaRtszjPn21plO+NnhqeM3f\r\nh7kKO9oaMxBx3Zc66zO9QbAlXBum1o3bZd10/pWyBOBdfqvyKERfraskICzW\r\nYDmNgGMkfcE/+Zm/CEQoT0LtH51k9ZDEa1+bc/xoJkcvwZlQ3jLXXJ+mgeE1\r\nBrXABiwDbmeeV8JRy8jh8Wv+lGxql1E5anNZYPVqYokxCnejmc8X5zngrh7d\r\nY9yOzciv2GzOYalhneIc7cbbgBlWrSLmr4o=\r\n=1ZIZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230317001802-ebd1fa9.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/7ca26378a3410a6a9e55340bbb0ee759/blocksuite-virgo-0.5.0-20230317001802-ebd1fa9.tgz","_integrity":"sha512-Za4uVotqzOEebuxUn6wdgDZ4KuqZHKKOYUYCOmvnJhb84m6YzRT640yPVy0TwP3OMQAHJr8ivesO434q8L3yRw==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.5.0-20230317001802-ebd1fa9"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230317001802-ebd1fa9_1679012749657_0.3765917960465721","host":"s3://npm-registry-packages"}},"0.5.0-20230317014705-a881b9c":{"name":"@blocksuite/virgo","version":"0.5.0-20230317014705-a881b9c","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230317014705-a881b9c","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"411eacd8b9b5b1917e93eca581c550f00b3a952c","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230317014705-a881b9c.tgz","fileCount":122,"integrity":"sha512-MGmNEoF5aLmZl1gnfaJQO2rPJhRodsYnlKaxLWHaxnrfYuxfbD1KlEi0uX4rc17nz79RqmKg23TcUnStiL33dg==","signatures":[{"sig":"MEUCIQDccJnokz1QviF1MNZTSBlOA41tlCGE9Z4kxA+LchEgdQIgCYSEZ/q6J7geeaD+cQOVCX+b+uuiq49f0IZPTHFdbO4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":406914,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkE8dAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqizg//V9Hp073WUhGih041wWXBD/r1E+D/WGQ3SYqaOBhNzAYaiV+z\r\n9SfvUQbCARCzxgPmxrTpPNXKNqs0JyY/Vby5+vUUT7mJjLWDqLN4noGsJIW3\r\n8KvZJcjCQj+u1K87Su8GFtOiSPi/OcNgTzkhKcgbGpryxws2p102mIqZaXAe\r\nIaw6hOZ2vruSt+Tl/AfusnpPIPsBcgqkdFdeJkVmfhsvj1XHblIsl+E4i47X\r\nhNNcs9EAQW6LnDvcp1iRcVXNM2wWemvhgNX1wIRFwn6MfD1R0R/u8DnPTqNy\r\ngzOcoKkEVJgdHzPt9r1ycvJCId5+3yto5hWyaopXEJBYO5fRsVeJRwqDQu7P\r\nwOfbjgiwEnjDqiEv+1qQBP5cvMgmD9C3aJ6p5PQuF2YmgMtANNLZeB3tAPdZ\r\nWCkXcdqnE+Q4cXc+9lK53jr4NlxCMty5YtCwqUHSD7Q2gSwcHdVAdSKD9Euk\r\nBN+5ODmgBAyvzKGLvMrmX7ef6Y1VFIBOEATI1JZok2c3jfIrFHpIKZZ7azzQ\r\nj+vlh3C1NxEsXjxB87NkZWfr2kzJ+XwrBja9vMjTDkze18dPUcQf/HazLTLY\r\nEwlyprR6I+IXj2h826z1dzTng6w/dIe328LbrpZUZ/M10BFGlu3MHETRXk1a\r\nnmAbAp0N6wCE5xFyHSbhfQQz3C0+p9Pdsq8=\r\n=NsQf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230317014705-a881b9c.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/a90db04f698e94cf4ccac07a232648f5/blocksuite-virgo-0.5.0-20230317014705-a881b9c.tgz","_integrity":"sha512-MGmNEoF5aLmZl1gnfaJQO2rPJhRodsYnlKaxLWHaxnrfYuxfbD1KlEi0uX4rc17nz79RqmKg23TcUnStiL33dg==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.5.0-20230317014705-a881b9c"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230317014705-a881b9c_1679017792161_0.6124103781277472","host":"s3://npm-registry-packages"}},"0.5.0-20230317123153-8e8266b":{"name":"@blocksuite/virgo","version":"0.5.0-20230317123153-8e8266b","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230317123153-8e8266b","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"ef3ebbc443f2a38de98bb76c4b7dcbe8abfff1fe","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230317123153-8e8266b.tgz","fileCount":122,"integrity":"sha512-norVUutmmEiGu3DM8M+rpm3JZOAnK/KaubPQqlRWJWMp8vbGNqyqS+x6EcIfNYqDxYpFnrehNZZWzaSckyAITQ==","signatures":[{"sig":"MEYCIQC/5NxrRTz71C+Re/gkyJ6eMXlCpgDRmeAPj+pPd/E9OAIhAKWXUrieLJ4KTnrOyPJDNadp/2yZvBvt/n2KCwKTlZNp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":406914,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkFQTIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqEig//ZDraSXe7PybqhuPol75LUwE+7S2WrvpN9tEzZ12uxKryQQxa\r\n33oPf3cIKVEal2YPiUt+6JXLIvItOv7wsd19H8TlfVOJbv0hMHICRObYVreU\r\nZgMASb95mYU7RLBgEBan34RGD8Lq12fSiPWiCd2AiR6oyzplWMUScPHraZNj\r\n/871fDdeWdDSZqFU/ZzQdT4zOrjYQlJB+jBg14cfDP96RnNcw7bB3Ju7mukw\r\njVuTdi07NgbQ9hARBpP259tHGgbCZ2l2AJar1c1u1UlfuBaX3Cy77V1ayDHk\r\n2EMY/myCnSwX+x0jtijPXUk0AcoY0Ye0YF/YDbXXVATGQyz7TXQ65QPeDjpl\r\nAGcJHgsNfQftbX7W7O4jx70PI2AE2qTUmIa/lPIMRJy8aDUyvSZOGnWlPbok\r\nsXdS10GMOPZiJ+A6M9yErrfXVzEkpDVEu+P1I8ETR6bOJ71ufsrzMBf8vXFf\r\nYbdp8dUs+LS09ntlPoA3UECX10eVe1YBbZNtKmPHHROP74p95pj5bbZqbmCN\r\nzUCAqHThDZsUfzXfB9dnkfA08KCH+IJiS0vXqpAfokRbZqFN/+b6Nf3ZIXKW\r\nhl3vgOAEZOB65KvzDfLvWPBoyPUwCtmZyjrlF4/DhQHrXdeuvWPm1nN0aVHj\r\nvEvMbC3Wc/C84rXs7n5e4JWeThT+rSRlmOc=\r\n=zvjW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230317123153-8e8266b.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/2455f62a57b98dcc262200b65e7d9ea8/blocksuite-virgo-0.5.0-20230317123153-8e8266b.tgz","_integrity":"sha512-norVUutmmEiGu3DM8M+rpm3JZOAnK/KaubPQqlRWJWMp8vbGNqyqS+x6EcIfNYqDxYpFnrehNZZWzaSckyAITQ==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.5.0-20230317123153-8e8266b"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230317123153-8e8266b_1679099079982_0.27526702190928676","host":"s3://npm-registry-packages"}},"0.5.0-20230318175000-60fb620":{"name":"@blocksuite/virgo","version":"0.5.0-20230318175000-60fb620","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230318175000-60fb620","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"13d2888c557b726dffa7b3ad77696450c194f0b9","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230318175000-60fb620.tgz","fileCount":122,"integrity":"sha512-sOFdmjCQ6ZrS00ewT7AZ6W7hkczj4bFzViaGxkJi5xaAMGAH+4IQBTN5LxoReanSJEbF6KnRuzhLd5SrgeEAoA==","signatures":[{"sig":"MEUCIHWDNI5pAMhl+tB+qxcGeIGVerqGeGDD4RQ4Ur23Wy6OAiEAwbDnxoydhMjWftlhgIaulNH+7ShWaXRCnQeaIk/xO9c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":406925,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkFlc0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmreEQ/8CvICuimyyHXk7yG3aB5JMjPtozLj7CYERDPhbJSW18lSTEbs\r\ncPV3H7JDoZO3rk94PE9fdwii9ZjP2+8ECKuaAs57RFVKfEcyUXvJtA2080OP\r\nCVuqg5+aHm+UCMz5zs2Yo9pmh2bLBNI0q/xVzjXun1JZuDLajZlb7uO60g+l\r\nWSGhxFDh5He3W7huXVbVoOh4tJT5iQKWxivtYEGkSYEm/U+PAh4NHG9blYli\r\nL8HMCmr56UjApgiRmol4/OIcgjmsGWpUv1iPP3rtmgHAbmTZ1UuxyrChBc5u\r\ns3uw2LIBA386qBzoc0rnctAEZPCjJCcyEJ9ggbq9/Jzme5QYl+QNPI28mfG8\r\nqP/BjL62ySC5TBelIY4WyYdnu+h2IKR3TzfF08+M4MTTDbm9xf5d+tmMK1iL\r\nAuME+77k2QR6DEefJCYoS1wi2TbeaAzGdb0QFIZHIcuGjwCXLtvSsKCmalr9\r\nw3SjvcX77QkvJktxcjjWafN5SfTMIy7jq8E4TJJAo+fLKUJiDzBFgxdsQoND\r\n0RMPl0nEe7XP3bPmKyAi1+jW8zxbDsGX0PJyJJ3cbYLgp5aQzeeo5hivpxWS\r\nk+gxZjBYeaH5+X9iv+ouwcYVQH9X/V4ovvO4jq4YcsyfGsral/dTe6UPnaN3\r\nlT/ncXUY6goNH3GiX7rMo1jaUWMWZL1WlxQ=\r\n=dHcA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230318175000-60fb620.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/b54ed795a542ab4ad4fd9fbf046eb8d1/blocksuite-virgo-0.5.0-20230318175000-60fb620.tgz","_integrity":"sha512-sOFdmjCQ6ZrS00ewT7AZ6W7hkczj4bFzViaGxkJi5xaAMGAH+4IQBTN5LxoReanSJEbF6KnRuzhLd5SrgeEAoA==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.5.0-20230318175000-60fb620"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230318175000-60fb620_1679185716334_0.34147763829473754","host":"s3://npm-registry-packages"}},"0.5.0-20230319043029-75173db":{"name":"@blocksuite/virgo","version":"0.5.0-20230319043029-75173db","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230319043029-75173db","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"8b4a2f50700860fe1cc588fc5cc2624f57bd41d0","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230319043029-75173db.tgz","fileCount":122,"integrity":"sha512-YBpgPlygf913vWy5dYhIGlX5l7dxfDjBWnag1q//fBixSEYme9pkxr6jIuZCwwSEgCufX7vgVpNC4ogXDNKArA==","signatures":[{"sig":"MEQCIAYrlQvSVbsPo+WdXlhrmCwkxSaBM6y+tFPd+41Crf++AiAcZ4s7MEwM9AVKhM2RcgVRBRfI58fLx3JhVYc1alsVmA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":407322,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkFr83ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWtg//TlM+NjZ3kj4nuFZU6dGvaSy9k2IW2i/s0ms6q/HgPWpnfh4W\r\ntnAOwUBU2dGNLnwMOmM46dX4Eud4X074dWQmIMNmZi0JLvaXbzSUIC7gbmXN\r\nUq6b2O7O5FSbdYpCd91yywG2tUbD2dIOKCrp+i+PvrkjCWYP8c2tG344pZvz\r\nZCZmWWyZ6ZBvHRSsOVmYs1RC2mZ2PcNlbLxINQpJhTLHD7SmMGI9R2XJg/I5\r\n7LERr2g85/M3tWyUlu0V9AG1VS7P4u/GZQ0iKDkPtP1OykDDsBQWiL0w78Rt\r\njj+D2N/SB7f/Tjqu4fGqCaf5ikg0AJ/BAVAOVXR9ZP/JGccpWmFXCLJrw8Z8\r\n8oH3k091N3iLn/Y4dD2epxel//Pq7rJrnDgFvuRm2P4tDGYANANu2JcCOhpC\r\nGtq7Slb5RAH5usT2aiZ2syIK583Ieqcs8kBko+sCc2YZI/3xyDL4Iz48y22e\r\nUbzMW1jFerXMZtlJzcO9XIxAlUvOgmMKTRT6lv+s0HCuDGGT4AfFkdH8tFwv\r\nScMM0fhHeDx/hUEQzfgTWhfh7/pwdcvt+dkOyVR1SY2QN6xPIse49pDfXAyp\r\npYS0uIH0i0k+AJu8UrrEBNgP0XZPmrpujFp33sh6lG4J80YVKOM8tO6JMK9H\r\n/opmQlzoW9PcfYzW71rbwi060VMvGcFKE5Y=\r\n=hMjI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230319043029-75173db.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/f59384dca618c7642c7b4a7d3a500beb/blocksuite-virgo-0.5.0-20230319043029-75173db.tgz","_integrity":"sha512-YBpgPlygf913vWy5dYhIGlX5l7dxfDjBWnag1q//fBixSEYme9pkxr6jIuZCwwSEgCufX7vgVpNC4ogXDNKArA==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.5.0-20230319043029-75173db"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230319043029-75173db_1679212343791_0.3594890917123006","host":"s3://npm-registry-packages"}},"0.5.0-20230319195556-f2e3c52":{"name":"@blocksuite/virgo","version":"0.5.0-20230319195556-f2e3c52","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230319195556-f2e3c52","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"bc69315327f73f96e9a632a73666d7f9728bd150","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230319195556-f2e3c52.tgz","fileCount":122,"integrity":"sha512-IpdovtgcpuCwUX/HKAnwB3s48Opfqy2sf2LRLRKjinst6yAxFgzlZBH8SmEXx/oKR3qo44yf5sn7rkbVwuELVw==","signatures":[{"sig":"MEQCIFA36GZBEIs8QCk7YfypcUwvL0Uvli3TYoJjpenu/TBpAiAsMG6JexMk0sy1RcTf8b1Om6g+hN5hNb22UvnRiTq8Ew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":407702,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkF6hAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqPUw//QPThoZwlLFb52bH1DAkJMmrQC/nG6cNLLS2zNuBIWJELF4HP\r\nXgOkPATpca+w2eZI/77OPDGHaGww47MlTs/8j8ln7UqerJb6lyAxO+c7CxZY\r\nG6RNuZmdGqUoThgAfQ5tCgvo8C4H3lvikTwCScaIzm7BzjjA3CynBR0NCAL4\r\nascnwgzTQzL0cwuDRDK210jXjrOchBolxOEeHl7m0h3hKA74tsG3FWOlUKyw\r\nyGywawpl3kBFfi3zcuCo2DERNfrvZOn74r16IZYFjUnJJHnfTk59oeZMAtvN\r\nn2Nw7m1RjdFynSfhlNT5rU76rU91FGaFgI3XwtcWKlDK6PCv5rSdygAZkj7I\r\n74JnCZro7NZ7NERNMrzzBjZHqwGptV7KOioDStihhibhLJ9kHebrP969XS3A\r\ndnvbn8+smjc3unj4PyiqoeyB1foWYgU9KURJK84qattCYGAgeGYSl6Dzcwz2\r\nBjuyBrf5KH7pC+xPNro/akl36U3cuz5Ar9TnM/HZwreLJDBbN1X5Km9czIyk\r\nGPWGoE95u/kLB78qHuOOWD9tHauUOR0EmNihxo58k6Xutcc6FedeGGOKowPI\r\nou+EHLdenhmyNJLwwV1RpLrKbaZ+bPcqjwrBToI/LuMDyVsQGhR2/O7U0EQq\r\nLlPwGNMkwlk+60tgsIeqFSTUawBABSjJG+Y=\r\n=zjb2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230319195556-f2e3c52.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/24e18f7e8b0da236890e85ef4531194a/blocksuite-virgo-0.5.0-20230319195556-f2e3c52.tgz","_integrity":"sha512-IpdovtgcpuCwUX/HKAnwB3s48Opfqy2sf2LRLRKjinst6yAxFgzlZBH8SmEXx/oKR3qo44yf5sn7rkbVwuELVw==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.5.0-20230319195556-f2e3c52"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230319195556-f2e3c52_1679272000553_0.08584975080551649","host":"s3://npm-registry-packages"}},"0.5.0-20230320034723-8dfc65e":{"name":"@blocksuite/virgo","version":"0.5.0-20230320034723-8dfc65e","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230320034723-8dfc65e","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"212047397b6a23c2ce5031213e4d5de1ff8f056b","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230320034723-8dfc65e.tgz","fileCount":122,"integrity":"sha512-32Us2pUL2QAEw8Y1WNYv9z5QtKgzLx4BHHdEtzNseL+4WjTmDPOmIE9xr7aQgdvTTHX86/yZS7NiJQqjOuLLmA==","signatures":[{"sig":"MEQCID9233dz21E6W61ru2t+S/TEmKkzUCv/dtU8scz+U8FqAiAIPqHWsPhRKoWjOJfnAkYHygjGt8Eqrf4UwuapP2IgVg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":407680,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkF9f4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDpRAAkLUJJ/CgsiyrzVNQkgAq+vRZO9no10/nESX8DVyRvcQB8ZQm\r\nqp9+gU8GAB+kSnPkbMeraDQkMRj1qXEn5KeWN5wr97TwlP4R+9Tn+jr+HPns\r\n0h2jebJs8UrSwEV4ud3U7b0441yqdiirs/02CjL/RDrQuwV7F5GHcqrIVX3/\r\nc/9oqNG6Wltoe2XAAzcwYqvzgBTkCbKXUsvmoZp++mQ2r7eQIqDtucBIapwd\r\nvDU0crhyd62y8CgBRls20YjuMArVCsNerFbA5BtTWZ2iwCzzh+NVvjy1Mn2o\r\nKBmWkUT0iR5mySR3pq5sJ0AuvVSljfez4Ti7iq52hMu4LJ7tfR061o7ZtrOf\r\n9m1L7suUPLzoAq7b4USIkj7ivjVW6lTxmTrwC+6BLJtteqHDJhFqc6+a8A4s\r\npa1/vHgzMrPijwbd/GWBwepAqaplapYDPAz79JVt0qAaI2konfOvt/LR+1px\r\nS/i9Cm0C6aSYxSF+0kgGYuYb9t0PsZLto6OEp4kNEo3EAM//65x4WFQPQpAp\r\nwZWJ/Hxjr4E9+284njFyvxmg6z0kPiDCDZSmV29p+g2rFP9B6mnTniXE+/u1\r\nzuGOFPceu6wJzoa+TDfP44iUTQLfp8uQhPDI+tk4M3OqllMHk5ohJtL75CoK\r\nJ8zLLddxY+NW/YExiTUtl02tSUAueoge3d0=\r\n=uXzi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230320034723-8dfc65e.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/5e2f59af402d170b07805ad5e7247239/blocksuite-virgo-0.5.0-20230320034723-8dfc65e.tgz","_integrity":"sha512-32Us2pUL2QAEw8Y1WNYv9z5QtKgzLx4BHHdEtzNseL+4WjTmDPOmIE9xr7aQgdvTTHX86/yZS7NiJQqjOuLLmA==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.5.0-20230320034723-8dfc65e"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230320034723-8dfc65e_1679284215792_0.022269520411131172","host":"s3://npm-registry-packages"}},"0.5.0-20230320070546-078e5d9":{"name":"@blocksuite/virgo","version":"0.5.0-20230320070546-078e5d9","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230320070546-078e5d9","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"429f95776d4a548bf88fab93dadec65352dccd87","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230320070546-078e5d9.tgz","fileCount":122,"integrity":"sha512-2v2fV6WNPeDbUKhtm2Z2i2TjRWby84MRDWTl3cGYVQ9atPkx3cl0u+0g3gVsjf1oRJ396FxhrhBYHz30tMhw6w==","signatures":[{"sig":"MEUCIQCJJ0dX2Kw2QTmw9Zi86LOrFV0+eaG5PItZrdbTpq+l2gIgUsqZUIuTVse8oBbuwWdH+QAZJciASe56leUIzhnf0hM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGAbHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoE4Q//V979TcHeVHOpCp7k52wOj3AmVilxqQ5AzQZRAKVz0BapN3+7\r\nZj8bqUVOnWg8ZSjOJlbrs0yO9Qpt3Xt7P7FjAgkM5v373U7prkBh5idkGqtz\r\nPTgNIS2uWzIsxIkrTNhIbZgsuAR2i2EFoWVpVMVgLqqkTJoWfbPDRENKG9Bo\r\nGaUPEtiEAjDqcWRiqUublk8h+pEZicaOI922hE5zOH4T1fY0/FIQI3kSDAkI\r\n47y0cGN6dWfN2X489xY6/QFiALeQxPaF6vZJZnO5QuAlH5U+vxyhTgNWa2qF\r\nRbpCZabxhKxPB14XBKhcKRX3SHJhKfcUfmhF/irq3NS/ZZYBp6qgsPY/O9gb\r\n2JUx3wwAOyyFhEu0UrmRVEssMaY6mmUFF/nhWh5i0Odx2oiGIHOeFWQKDQHD\r\nS3sXgHWLcVe2F+dXAvRbmvRRCtP3F7hjFmecxTNjvS4mxdBQwL44/g9s/Y36\r\n6fcx8/8xIY5HIZKvb5xnv5GlxV0mWtapc8a6UvoyPtCwiGmEXPTgvnDzEjXo\r\nBIhkA/gZbY4ZEvqOMhksUjbI9TmkzOdl5u8lXuKc1PfOc9ljszUjhhETqWzR\r\n+tsqNjUcKRNAYDsfZmkuiyqUveM3y/qr3TPbXiX/2yE5eOCLnAukUHmBYFr/\r\nF5U+CQ0E621LnrpQ+14947E1PSVnHAHjjIo=\r\n=AREd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230320070546-078e5d9.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/de91a1ffb51cbd38bda9add60080c40f/blocksuite-virgo-0.5.0-20230320070546-078e5d9.tgz","_integrity":"sha512-2v2fV6WNPeDbUKhtm2Z2i2TjRWby84MRDWTl3cGYVQ9atPkx3cl0u+0g3gVsjf1oRJ396FxhrhBYHz30tMhw6w==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.5.0-20230320070546-078e5d9"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230320070546-078e5d9_1679296199628_0.6032466361879376","host":"s3://npm-registry-packages"}},"0.5.0-20230320164115-e612d17":{"name":"@blocksuite/virgo","version":"0.5.0-20230320164115-e612d17","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230320164115-e612d17","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"3f71a1f5d34d92d262e7487e31c79e4fab1be0f0","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230320164115-e612d17.tgz","fileCount":122,"integrity":"sha512-avR/88OrnKqVGigC2NyOR4MydOrJQ0TvWT+3g1JcL+H5iEwdHblD89+TifiKaBMv9Ap/CMTObbV1yfXFt/IH3g==","signatures":[{"sig":"MEUCIQDLG66FlI6uDspgTN9G4GhhcFJc5pbmnkwwPcSMnuc1LQIgJhYv3XxZURbO1zB7j4kTrpw3cmg5h7a/s5MkZqNKSG8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGPlRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrDMA/7B5iDDU9unNh8QVklVW6ykxEn5lmo9ICPjrwi8rd5+Auxjis1\r\nAuaPsfxOIvb4LKaaLGWLWQaOF5ZObJ3v4cBQuJ/EIPyawuYiTDkytnueQQY0\r\n4kGlKfWwb3BNrw5m78BT9357N87jKTCbKYjWb1i1waPJhrT4gHMP3j2HE8V8\r\n8NFLJp9YCpLZOQ4o0xAwKTOn7y6I+0QSxA17plJcEYut1Ok6DHg7xcDnabIh\r\nrQpUyy3wiuPP/lstiKUHPUVm4QD8bCUWgM9paxfeNfBS4BUFXglLBLwWRzoJ\r\nuD0t46RZh+ByiR6Xorss6dYCt1GxcjXx+/8QX6dWLYayW0cioiqR4slxs33Y\r\nC7YBjSzvb4MDeW3Fzc/wQTj1oHeh9kvLuhPClWBrVzx42w+oCKA6UJl04YjT\r\nmA9AqhSHHzKtuwnpfUvOh8bZmW4e3IAFzL4pfFrjMh3Qm+fiIel5E1ynUp1d\r\nWvY+8xAdD6VK28GVNqT4cZ7iAgTy33zpmUF2MHjjaQ9m1qD6GlKgBnkNG2cL\r\nesI4fI23mWPjOD51lc/KYqT6SFuWzUxA5LXAHQLIvgA5o+rXfEgZl3OSpQyY\r\nvHkIU/IBcju/VNBggiUHjGSxVj/zbXjlfv/oRtPwbHUR1gfj/ZJjR3MhLo9I\r\nZCB+dL2gl2wJpqdb7oSo3gVro31fnMrifZc=\r\n=9gLL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230320164115-e612d17.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/be4f5f80d34ae326ce9e2f2cd2d2cb23/blocksuite-virgo-0.5.0-20230320164115-e612d17.tgz","_integrity":"sha512-avR/88OrnKqVGigC2NyOR4MydOrJQ0TvWT+3g1JcL+H5iEwdHblD89+TifiKaBMv9Ap/CMTObbV1yfXFt/IH3g==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.5.0-20230320164115-e612d17"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230320164115-e612d17_1679358289755_0.7007487455421826","host":"s3://npm-registry-packages"}},"0.5.0-20230321222249-433f06e":{"name":"@blocksuite/virgo","version":"0.5.0-20230321222249-433f06e","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230321222249-433f06e","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"d5657b3706f7c6764c127883b76597cbd71a30b6","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230321222249-433f06e.tgz","fileCount":122,"integrity":"sha512-npNCRFxkLwcx30KYIZkwwwnn35KdUYPgW89CtW4RijBXY1gJcHUbxZfCIyq/6/2UPTKhxMJbqAWZZwzVX1Eopw==","signatures":[{"sig":"MEQCIDD1x0MGuCUvJuJDE/aRnfQOP8NihwnIm4HjsJwda2BWAiBE5fU8/D5r4apoM0Fz6KdjeJeQLIuJDaWs866jbUynJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGkpZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoqyA//RKDsz56lLnkd6weM2hT1aUbdb8sw5NUnXfrJqmn32JfJoJop\r\nWxrW/lLmIDr1di+6kZjj1GtQWn9gsN+aYnD2jrXehelWqSaYlBdU5YMygIeW\r\nSO5BUTW/I7v81pPJWcDI5aiMC2kEZiPjGPkuwVkYUMXYoayYsKCLqegAXDuS\r\nR5vPsOl1RfmzO+FFrRgD6tbDekCqO5cvJ3qob368I7IP0+jqOw/VFjBgjdsz\r\nV1wIrgykKter53SJ66bL8Ab9G1/DtBwc5wmpLIjB0Gy1bTBpv/4PUGa05sxk\r\nBBHr4hOzy1s53PA4rS7+bt1TxbuhKTzQ7cgA1vMZEf83LGRgyu3uxdGFNIXK\r\n9yFxRR5iNKSVTuvBpgARtUBfyIF6tHXylJ0gzf+CX9nxObeNtFt/MCkqCBp8\r\nZq1PS5QVwL8vERCscYZsIOXowKXQkVtg68pBRn5oTRlwottqCJMw+AHRDzdm\r\n6qn/H8i8+V6Lb3y84Cq765/bn/9aul4v5iOKJbc5yJHjE4aDI8UlFyH+TD8V\r\nVM/zwXtkOhbr9jHriCc9eAMuHFCHVRt1LZyttX0d75C/s5zI22bg9NiMI28y\r\nVbUJ3mmNw0bddlvXT3FkmuHOjx/UMLJmz5jjRvQw+BnbAJHg2To1j6bhdUPF\r\nzlb9Aaa9z6Uke0McqTGjcz4OA9UiHuorDfY=\r\n=VlMu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230321222249-433f06e.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/a6f3932301fd196081748e77ea224b93/blocksuite-virgo-0.5.0-20230321222249-433f06e.tgz","_integrity":"sha512-npNCRFxkLwcx30KYIZkwwwnn35KdUYPgW89CtW4RijBXY1gJcHUbxZfCIyq/6/2UPTKhxMJbqAWZZwzVX1Eopw==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.5.0-20230321222249-433f06e"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230321222249-433f06e_1679444569371_0.5620515468568161","host":"s3://npm-registry-packages"}},"0.5.0-20230322104334-714fb62":{"name":"@blocksuite/virgo","version":"0.5.0-20230322104334-714fb62","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230322104334-714fb62","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"41468946426921fa5d10c97047f9336878f69b56","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230322104334-714fb62.tgz","fileCount":122,"integrity":"sha512-Pi2h970mjVaC7mnLrOgOG7JJAuRBfN8//r8dFI/7JoAJG52LQDzYWDw6i4qgvdwvirW5sayEtPANn7cQzLPqgw==","signatures":[{"sig":"MEUCIQDDx3uNOWZpIE+mNkGMyawKN8Q2AbrXKgyqyNozrCOwyAIgSr/34/tkj7EzjEJ55zH1DMO3Zynw/5vEhHA9TNyfC2I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkG5zFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/Ug//cghPkIVuVxMqWFZ4mJgPFBf0FAMADD4zkzeGqtmIUZjwajvk\r\nEFDG4mOVJNXSDWh3KuYfVJ49+YGDuBEPdaqEa5mHq1ja/bXu/HIQ92JFj57W\r\nJZcYNAFILXrTOi6VHtQNNRrZC6VkfQHj+C6TNTrym3RzU5JOafwvazkLHf3l\r\nyoxFWn8j0cVa4IGTmBkEbbUhjdWk0EBpO56r1S7X3eKkZQV6+gV92bSu0y0B\r\nBhI0nAt6KJbRtQXfVwe2M6RtHZgFNoQ30EspNv6QAlyuPPRbcrFQLMxUOU7k\r\n40zHeUHYZ8xWm7dl5+seCwotT+vnF9JJwsWQP/QFW8lPtgvxz9peX3+DtkFD\r\nS69ySZlB2Cf8maQEo3OTTmG5lZ0fBPl1THE1aW9o67nMknQPKo493O0fu2Hr\r\nhdzIjcNGPNIPUA7fFv6whnzWDYlXBrZM+NJNlVacwgKPXjDtkj43KTKGPoLO\r\nzjaFbvskbkHtU91cz58k6WiI5vQxB3YfhF18YR4Gm8vuQLvYSsvvZpUW/0pO\r\nCrNV6llcqNnGCXmV4swiVqEx0cCRgpXvkEwtM32SJLfCmqAEfk8EqDXBvnsF\r\ngebc52skTzoZJHyWiNvX2koB0rXNyCOYZ49rd5Qhdsn6m/sdJYMBo76Rsy+f\r\n5FVOtyLL7bn4s2yi41ZcMSOB0rQ1/oq56nc=\r\n=YTDl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230322104334-714fb62.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/a78a41de48afda77d63207eeb122f8f2/blocksuite-virgo-0.5.0-20230322104334-714fb62.tgz","_integrity":"sha512-Pi2h970mjVaC7mnLrOgOG7JJAuRBfN8//r8dFI/7JoAJG52LQDzYWDw6i4qgvdwvirW5sayEtPANn7cQzLPqgw==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.5.0-20230322104334-714fb62"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230322104334-714fb62_1679531205540_0.8045552945804932","host":"s3://npm-registry-packages"}},"0.5.0-20230323032255-e75ed32":{"name":"@blocksuite/virgo","version":"0.5.0-20230323032255-e75ed32","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230323032255-e75ed32","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"dff1520a6e1bf54ba4d46e337012c61bdd63a07e","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230323032255-e75ed32.tgz","fileCount":122,"integrity":"sha512-OBK47xOsEOZySNo0Z3Jk1z/BBiIi+Z04vUjCt3easo7sxVW9+GncBp6j5Fb65ZY5x5wAWUc0Jzhhs50YV4Cb1w==","signatures":[{"sig":"MEYCIQC48b2HoBTvsJ71AfJLydvL7aT4qxhyiE/iMdrwAQzvkQIhAKH3R2X01kWw0DPyIbVtntvVxjzQGFSRj853gEFRWd3c","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkG8cfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoEbg//f0VFPU1L6jcSSGbtiOrbZORHF1AwFrUQkR8agSbhrbTElRdQ\r\nk/QXeZsLtPHXZn3HEnnlvTaL6VcWxmhRG2nl0K2U1sAFcdp26UZh3qVQz2BE\r\nlE+cqBaK6jBl5zerCR2C/vsdxQHmwyRDVCMM3b8022MlhbmPXkOwWxF4Z6Xr\r\nSbJIgS78p3cB+ZK+agpq2OxMC+YvvoFMieXE6pmd6Jcxzerc3kTWaQOG6y9w\r\nELl1faW/f1xJOcvqOF27SplffmTnxOBjyB0BZO0ReBNFUUBf17xjDtFFHz8s\r\n0LTIJOl80rCkTOkL0nMqIkkbSW+uwVKg1C82GIm0aqYZ81nMZdj0fTsD8cOV\r\nMOaQqIpa4SGoJCwPbJoMOmE0ykG26NKq9FZETxo32dhOqjE8WBrBfSqNqeeO\r\ncXj2NlbTPhE+Zi2RKRZYZyWT/+Q5CJbEi4WPkiVe0q4v7yHF/bfgu3csmQey\r\nmgZ803o6oQL2NKLKazowaLkCNy3DEeCCDm+jOEF5vWlevMhkx+remWmfF14u\r\nMFMNnmuwq6YTMeAO+v+LFbzZ4506FOF+uq2mPJc+fos5Dw0dts8fjSsfEWMN\r\nkkKSn5i2gupcGm7VueqFtHKqJgVsYQoiNIUiH1dlZunBKxXLpMjDKim7POwT\r\nRhqkQebeUExtpt4SNrfBjICCmZf2Reryg9A=\r\n=eN+j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230323032255-e75ed32.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/1afcbf663269fd32c852eb40252a96ad/blocksuite-virgo-0.5.0-20230323032255-e75ed32.tgz","_integrity":"sha512-OBK47xOsEOZySNo0Z3Jk1z/BBiIi+Z04vUjCt3easo7sxVW9+GncBp6j5Fb65ZY5x5wAWUc0Jzhhs50YV4Cb1w==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.5.0-20230323032255-e75ed32"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230323032255-e75ed32_1679542047010_0.7545481344558238","host":"s3://npm-registry-packages"}},"0.5.0-20230323085636-3110abb":{"name":"@blocksuite/virgo","version":"0.5.0-20230323085636-3110abb","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230323085636-3110abb","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"06206161ded3af2d04490b8fc58b4822252dff11","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230323085636-3110abb.tgz","fileCount":122,"integrity":"sha512-94zw/VtKghdn93VP4Oa6ZhzWUE18spdTtHpp2X68ygWq2w7/AZ7MmATG+QiDbpLRSXlGiOfF98tWKvL8tbmI2Q==","signatures":[{"sig":"MEUCIQCekP7lpqFZmisP5XLw6NHGeQUrecBf9rhCNzQ6+m/bDwIgUD04/++P0qIjQcQXmwjhQslnFpN13nXQveOShcniY6U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkHBUzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrgHQ//V0P3r8nuVPx0J3ot9BP7fVr6eOzlzl79wGUgvM4Ixgdqxpqq\r\nLgELbtbIpuHNZ/YBcHHzVNkw05p7ZZGmu9mtU7NmcBpqmEE+qHXrgnN+lMRe\r\nt+YGNU297lybpp93n9vP8xHRYh6jg8yKZaxqH59GGf/hmyCG1bIcgtn3chrC\r\neqGTmymzxqlzcU86Sus8gXte0f/fSFuo/NY5nUjxU533EkGFAGjc44+LPklp\r\nC7kNIv/PBPreIVudVECiYbHb2zPPXkZVw5YZ1UVKSm7FdpxMBvp0CmmNTL4J\r\nTxLKLDTDq4Nz5yFONAoVah7BusCh8hNjwk0+3n7h3cVMoBdjxE1NA+RIr5CN\r\nw3r1tTlHyLDYPQCvPtQqocEbNkFdGUtfSZgb/w35dYM5n8j40X446Aqnc2dz\r\nwd1DvsCS8Nk05kHMVjPmIc5S/vBHWXsLIJPy/jRftEIvUJ4IB6IVYZnaxb7+\r\nsIZfUPUHyBHfGCwQlX6EXDSB4tYAR/7YPPKXzP1fVGCxkDD2jMsxdnfVSzV/\r\nB2sKWFL7KPci+HGsyPJBODGGeL6NzGf3TE7Ayu7Qxh9HnYik5Vzj96LYoFLs\r\n/nSk4PQowZfYD62s/fW5jl+N+WMO+uhaxWzUWi6yBkD0NJvz1BaLV1umG3Ox\r\nHcCboSckZUKhzbPbREzVZvnlfgu/MNAh8R8=\r\n=2UjX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230323085636-3110abb.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/e612aa8baf33df39bb8d24a03527d74b/blocksuite-virgo-0.5.0-20230323085636-3110abb.tgz","_integrity":"sha512-94zw/VtKghdn93VP4Oa6ZhzWUE18spdTtHpp2X68ygWq2w7/AZ7MmATG+QiDbpLRSXlGiOfF98tWKvL8tbmI2Q==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.5.0-20230323085636-3110abb"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230323085636-3110abb_1679562035100_0.41311332635434095","host":"s3://npm-registry-packages"}},"0.5.0-20230323171535-bb95311":{"name":"@blocksuite/virgo","version":"0.5.0-20230323171535-bb95311","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230323171535-bb95311","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"f00c93a46056c1792e54396f96653b4442ce1043","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230323171535-bb95311.tgz","fileCount":122,"integrity":"sha512-tBBl/OxbDNWoKVdB1aFMtRIRuZuUIVtLIRgEWJt1IaRf6xk2l/9HWG4F4k/8QHOpVSndqB9vyq11RGd3b9O5OA==","signatures":[{"sig":"MEUCIQD0VPZmb1TfKgg5TxtO27O3WEj/2ZJo/wct1D3ViFDS+AIgdSMY7homdCjNuUcts5JOJR75Ekpmwy9Vb09Zmwe/5UU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkHO23ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqrNBAAoJdwEzSrXYeT+rscE/ekuMqUONA/1JHvUD8cLmi7cX9OLp36\r\n2li94ErXwQuKTEIobcv3uiEz5duzQAPw+lO1tv6yCAJlcCBPhlg19mC2WtCJ\r\nwQEeSLFAzKqPP4rUmYVeXr3m5czuuBAkFdVLrul9Cmmm3PmYjXFuxW2/0xHd\r\ngmk0GRn+G9WKlD7ySfQJGaY5nwE7GJXo1AfnhHFCn55fRaUEu6lZRWswo7rp\r\nffKHm8rjLv8L+ce3zIpDKnoa0NMKuf8ioRi+MD3ay9s08B5Fm4eEi6Zl+SxG\r\nUWwWRrTNvEeF4uS4sAX4Lixq9Y4Rju2o8RZfGi62OUFGXlnt15rdbUoj45dS\r\nG8pxbOjl6CVNvDSWo63DAiO+u+SntF5k3NHQogCTLT4A1tjHUrpg9OR2pyTJ\r\nwglE/Ddy26dokfy9eZEsfpPA7jbB6Z9e34kyXh91OKC/O/rvUaCAePdDkJD3\r\nYn16kD/eP5KfLR13InGQkNOKPc0dKSCVdqMCAAaOBekpv42j5LMfwN2JHX96\r\nYEbOISREVJE4b2j7+7i9X0oWhknK8uCRyAd+HYApLJzDDlDYbY7KVlL6VZKc\r\n1Y8z86hqrlom5cOuq6B0xE7npwy96vSgyAyG4K8cGodEPENPO7kJvdHs7Mti\r\nOHGMNzRBm6t6NdIrG3UqWbL1NY3bu7P8QQ0=\r\n=+r06\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230323171535-bb95311.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/51076113440ca5eeced69671994fcbd0/blocksuite-virgo-0.5.0-20230323171535-bb95311.tgz","_integrity":"sha512-tBBl/OxbDNWoKVdB1aFMtRIRuZuUIVtLIRgEWJt1IaRf6xk2l/9HWG4F4k/8QHOpVSndqB9vyq11RGd3b9O5OA==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.5.0-20230323171535-bb95311"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230323171535-bb95311_1679617463716_0.7848013755042538","host":"s3://npm-registry-packages"}},"0.5.0-20230324040005-14417c2":{"name":"@blocksuite/virgo","version":"0.5.0-20230324040005-14417c2","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230324040005-14417c2","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"a282b1ace093719a8ad6469c8fc04a580f20e0ad","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230324040005-14417c2.tgz","fileCount":122,"integrity":"sha512-BxyZqxIg7O87yak/9Q0t302dXNHEBK2GDsPXdWdR+CAliIOj2BNyXAVVxQr75mITfdnK+xyc/f1MmKKUjpcCOw==","signatures":[{"sig":"MEQCIFso90nQhsC1M6ZvQpqfDP3nKLzQ3vE3aLKC07iET5i0AiAGGy5w9StvfA1KWXiyRh8QdiA2BIJ7unGGHC4EcIIfXQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkHSM4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWdhAAl4r56HEw8awcbjeooqOpwVo9zMOd33LlMUP5o9pL9yt3j1Da\r\nTvFjQhGwtJoJh6hXQkQJ8FQ9gMnSVqYvQuS2KYUkH+yfx7zhOgqqYGGGuEe9\r\nfaiwdrzjU70ymenCHDIF7RP3JvFdFIYEm9T9bA97k5QYnSWfC96jhTR7yHBJ\r\nXKaqm0Vwdu9bxNyBs5iUOHuk8+dswquZ1OHgnJ4NO2kKuIHf9GoOI+9YfZaP\r\nS1xiBYc7Z3wLuU3XOnlyIXMLppYWXGzCk6PgkHBUuwhGLfC27QfFjeptdoHe\r\nMjoqIM5E0Q3hxum6HsYvdAbJLvE3zumA2X8CsiKRNZYXFrDVDpczjzWZ//4/\r\nsSHOF63o4r8GROFVV0Ttb+JQIITxo4sAChHU2uhSt7gnYtpp8TsETjzSKjJW\r\nZ5ZzqMnzaibYbzfwssti4Tr3oO6cISrxg10CRyQikITNuwMdoJ5BzJ4nq+If\r\nh87P7uv9WwU2Uw8qHe20SeCURrR+YwUWfJP6gcwyQ6+hm5QwR71Z31XO9/S6\r\nZagBpOWMzxaBiQANeBLKS7m6IIxYYn3moy5JZ5pU6tGi0WTj34Cu6fdvnwKv\r\nY3bsm4pS8oSfrYAxOzUyT5ERaXIUMNiGhQkKihWKMHO/hR2XxFHqGyN8uvCK\r\nfkuIWUbMbBdm6t2kOQH+C1NreMi8Amrcl88=\r\n=LE5y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230324040005-14417c2.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/88464446c598569387ac0805fdc34284/blocksuite-virgo-0.5.0-20230324040005-14417c2.tgz","_integrity":"sha512-BxyZqxIg7O87yak/9Q0t302dXNHEBK2GDsPXdWdR+CAliIOj2BNyXAVVxQr75mITfdnK+xyc/f1MmKKUjpcCOw==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.5.0-20230324040005-14417c2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230324040005-14417c2_1679631160639_0.8485139813452602","host":"s3://npm-registry-packages"}},"0.5.0-20230324145140-41b55b4":{"name":"@blocksuite/virgo","version":"0.5.0-20230324145140-41b55b4","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230324145140-41b55b4","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"5e9ab47ea33881eb60c87b540208f5d85aee9f74","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230324145140-41b55b4.tgz","fileCount":122,"integrity":"sha512-uR2hhNl8sPf1V81NGk/dSjAgooOsAXEfmhNgI8eROOOXaXe5rWXuGzXDrs9Cg+Sr0KG8HGcWcYyQOPJePTZ61A==","signatures":[{"sig":"MEUCIHtmEIc7EEV5QhCior5nqJrMibYAhYqvssQxdyRS7csyAiEA4oeOk/BHuUttooUGB5DJHR9vatoWnyYEeCmrFKz66f8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411708,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkHj8IACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrqfA/9FUjhnWJyP64GYSaR4iAdU5WJ+nG7tJYQEZ4sk7ZKjsOgd227\r\n7ZHfaIGu1tKOdxfYQUx/A3dEai4Gfk+AV3+dzTSSjGd/qk92zFnsQkPQbQtv\r\nmNtbwmeVkJs490V8LNEowVOTdPaQWnfRjnw9uR2aqFq6QERsRn4+QUap8/oh\r\nhTN3L04HDmwzUgVEMtEe6+++Io7mVgBFMyhcQNtUHr37WcANS+ax0OOCkudz\r\nVKz+7nhVeRNh61eRM+Wkr+X2t3vFX9GaL2Jh2UF/RXhv28C9Lc0ewxD4fbUs\r\ncuRDR34Ptu4A5VAS2hJXlo/QtLY9FbRt0yZuZrd6rtM3bs8xCeu579X63gXe\r\n1/nS9m2xiGC9Oug9BcsD0XQNNECeEluRnIyZKK8ZGV4D8rvhxRjmlQjwa2r8\r\nzWFmLbZHQ5HfhdEAPfkIaupx+sb7/Q5W9dsW6SZLSKeVAfm3yo9vNGcDqHqm\r\nFqIo3t9LJdSUgHAbNyOIN6yyYl9Rik4Xq/eghkLhmj6/7GNGPtXeGquXzRUF\r\n+DF6nGN1HOOU68zimLe2Es1bTMGXi6SAlT05h9gZUciKTLoMQTCNS9rs94yz\r\nOoEj8y4kSwqIeff8A5BO+lJDQOF1rACAdRy18oOIcWhtyiHZVWGTR8EHUdDt\r\nimIxO9+CIuyY/xKDXiGuArFExASe99dOmyw=\r\n=6Mil\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230324145140-41b55b4.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/95091ff95cd1645d3d34cabce08c6441/blocksuite-virgo-0.5.0-20230324145140-41b55b4.tgz","_integrity":"sha512-uR2hhNl8sPf1V81NGk/dSjAgooOsAXEfmhNgI8eROOOXaXe5rWXuGzXDrs9Cg+Sr0KG8HGcWcYyQOPJePTZ61A==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.5.0-20230324145140-41b55b4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230324145140-41b55b4_1679703816451_0.013584919692458453","host":"s3://npm-registry-packages"}},"0.5.0-20230325162440-97027e3":{"name":"@blocksuite/virgo","version":"0.5.0-20230325162440-97027e3","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230325162440-97027e3","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"c843c78901d582049e69b8fda8d4dc2a31d3e722","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230325162440-97027e3.tgz","fileCount":122,"integrity":"sha512-yWMRL3jQ7qmS98RQTkwvoTt6T916vRJqbvUPTt3JUzijGF/m2Jj4sVOc9CFWqp0CUr1vgV3RdiBGUhtlQDB61g==","signatures":[{"sig":"MEYCIQCi4/Hdm65Lg7vOl2NgNVS039+GqmsfOMDVciT4Bhcn9wIhANkGej2OlywWpzVHnMJOGBaGtMTDM+UdxGj1D5T+TbqY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411967,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkH5FJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqDHg/6AzODyWKwuhC9ygefHq6e7RsKjDdZ9XPaU6OjwB+/j1HK3AGa\r\nPODnpQuKSppogBajfT/grSHpkAgCmhQC6AxKLyOiY3UNCmgmIfh6hH7yfrxN\r\nzuBLP7HN6P4Uv7j9jHjvF3qoFCdlMe9PR6Wx44eF/q/hHmDoNf+6gOo3Xboo\r\nMpVeAvLFUI6ZQNb0c+rv7fww0nV3b68RAGW+eXkt2lUco4jxUFunhH9LE3F+\r\nLMrzPX5S+nxCUZ2MzsOojB+oBZVYSLJQb44ij0UxO/lb1e/T6jcd1x70DMZ1\r\ncqho1BvnWQZIx9u7V1NGtsKr3GLHCJOb1027ce3MkWH0hknR/oJZSeaYTpEW\r\n9LzkhxglzAnSJybjW4zLMEsuwbWn/PAm9jnNQ2kcrrvtSHPIcHfp7jdbzy2g\r\n1STa6sLpcuCjzlkYziFwWM8X+Hyo62PXZjIHNXH+5MPFdlinaerpyS6yb8II\r\nGIRSD8i0poWfJgQr5D0O34MGmKGOwBThdTUJpw4D86jZs9Y7vVHsgEB31JnG\r\nGw1RPgOfOuKmrUuTpZkGllFnvZXyPvZ1KZDpUP4KdXy5SbEBU/q4behsAaZ/\r\n3PkRM+spjHXXycM6DS+MEoKrKuCz1Y/3Zc7aTyCU3c8NX810/ktYDQloLRNJ\r\n1iDaIlYpcHoFwYUyH7DFsR3EhchQcOfK8Ss=\r\n=iI9V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230325162440-97027e3.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/e56f751509881ce920f2142228953c65/blocksuite-virgo-0.5.0-20230325162440-97027e3.tgz","_integrity":"sha512-yWMRL3jQ7qmS98RQTkwvoTt6T916vRJqbvUPTt3JUzijGF/m2Jj4sVOc9CFWqp0CUr1vgV3RdiBGUhtlQDB61g==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.5.0-20230325162440-97027e3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230325162440-97027e3_1679790409158_0.32587220198173417","host":"s3://npm-registry-packages"}},"0.5.0-20230326033652-70ca43c":{"name":"@blocksuite/virgo","version":"0.5.0-20230326033652-70ca43c","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230326033652-70ca43c","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"f361a4c19050177c22295a6f8318811b6481d00d","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230326033652-70ca43c.tgz","fileCount":122,"integrity":"sha512-sUKStWCkoZ3NOc93Y2tBQzzmUVf+aERCGCP1HLFawW4yTNd55VTRAgJe65+fj4J3r/CORvv+YM8TFzH8wfBmwQ==","signatures":[{"sig":"MEYCIQCxQ7EvuGXEr8f7gCNFqWEiPrpAsvENgApa5mJZCAl+3wIhAJ9S71S9pLw5o5/Wr5C5fwwNjQsFx7YRUgDAQHvM2Kmg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411967,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkIOJLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp05BAAj/n721BcVqYOnkGvmm5zsvGQQphFV5TTtYHTmgsUzMUuPrlv\r\nKyJxUUsdZfdFAYtGP13yMMYPLgxuUgC9uGz28HKhmSn4aMdkaGO35oekPJuM\r\nloUmM5DM+/fM+GX/qAYd8zrN4s6OGl80xiW1IvIomRUU8zO1zjr4BFfEkWbj\r\nsTkenxIT+2SHBZN2WDYwcbX0yeTgvr7tJK0n20F072vlw0clQ+a/+lPpXdnM\r\nY74TYAjPU7diV7czkPhIJPgZbyWswhbp/J0WKxDXFC+oM5WpqGZhbkQZMSTF\r\n/QbIzZhAVfYKqMrGZd8vgQ/9UrcQR38Z00oY/X2vJ9HceCc0YQQBR0KzQfH3\r\nEUSPIXSldNFbGGcXbUdqk3o/AeZ8t1QhOaY0P4FJOe8TGXX8til/Ae5pwIDR\r\nQITYB7SIF4oafQo9sBB0QgFzrYYzd4L6BwNU0E39ldooCaWFLUXGeMWT+Uew\r\nl0KDNLqCMoDvtmdCt4OQLGNhuaPUM+DhPmGESKFhq16SbfcfcUBcSeDPi+SW\r\niVooPdXotDyhpgf0Pb4FsbfHdjLOh+scLSgQUQxSYZAhbDV1GKGeRyhMVJxD\r\nTpH1LEjvTtpmY29S2Rsait9Om1MKyLguLi/nvkIPn+HesEbHaze1uNksKEVp\r\nKp1gsWwxUywdcS/Q4cxZGk4gWjyCcnmHCsc=\r\n=51eU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230326033652-70ca43c.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/e5447d58465b1a6aceaf3bf6ec393339/blocksuite-virgo-0.5.0-20230326033652-70ca43c.tgz","_integrity":"sha512-sUKStWCkoZ3NOc93Y2tBQzzmUVf+aERCGCP1HLFawW4yTNd55VTRAgJe65+fj4J3r/CORvv+YM8TFzH8wfBmwQ==","_npmVersion":"8.19.3","description":"A micro editor.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.5.0-20230326033652-70ca43c"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230326033652-70ca43c_1679876683376_0.33184894617396443","host":"s3://npm-registry-packages"}},"0.5.0-alpha.2":{"name":"@blocksuite/virgo","version":"0.5.0-alpha.2","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-alpha.2","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"90c07ea1a25966c1bccd5fb020a07833411b7aea","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-alpha.2.tgz","fileCount":152,"integrity":"sha512-OuApMw2M8r0UcOcL1pQAvBul6bI1wFMzXLEeZ0lq75KoSSSKPC2ADNHaZEINxjqkkBMbbqiRU9mzd5HTE245CQ==","signatures":[{"sig":"MEUCIQDAYvdPZUZkjfjByxbFnP86aEnuUhiKyf2VwGp0IhRvPAIgUANbvL6ow5CSdFhNy2TnQjy7V1TLeG1XiPfhJTKu/n0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":441992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkK75qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmospw/+O1I0ODeaQ0wpA9CgBZX4kpiOCgdsnYMbf47AOxb33b0uhsvu\r\nVYOTALoWmLxgvPwl+BYbRRVHXopZXK9njTAnDOdh+L/zMOYD/Ni0CvWz0nlE\r\nG8mIC/3256reWumLJlDTfQ5jf7Q2VUtB8G4AAFMjWxR/Uy7vksKvYF414xJO\r\nHVjRreYwLN1g+ylQG5QuQJhvDorJonzbteHr+eYyOselk7wKvdLooWkZQec4\r\nKMOCvpwBL9RX5Uc4D6J2P+tiMHHo5OlwogBEsBODVA/lfRuek6uoqHDaBk38\r\nwa8sZWDuhGqsHdnt6zvTAaL6HqiWTAJeZ+aycrNNKXKZQQjChucXWY3mG1Vl\r\n4WARKt1wkfM/flbh2nQm2a1sfFpBXe9Fbdwl1V8cR7FcrNHZNJeClWWqlWQJ\r\nFQ/UdpzCAce1flaYwLNZVhBsUBF68Y2C7NM6vBGCzJedsbt6paKQq/ZYsP0x\r\nD2T8LA9Lyqq4ej+DbqwMrlpJj4n7i3rTa4K0j6x5gK8a3uMQYYMWf4Ea65jl\r\nEBPiQyIA8vNbey4tI7q2WSn1c7LU/4lK/MIafLm98/Fm4Th91j5sUmocqdXu\r\nQbyIxmQhynQN0/sjlT1fPBFECSGYtN9fU9VFlFEu0f44fyUAKdO0566XvC1B\r\nQAOMjreAAjwi1P66ZxEYUv070GtZxfOAoH4=\r\n=tJ1Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-alpha.2.tgz","types":"dist/index.d.ts","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/c1362f24f03e79ecd09f39579c9e1b1c/blocksuite-virgo-0.5.0-alpha.2.tgz","_integrity":"sha512-OuApMw2M8r0UcOcL1pQAvBul6bI1wFMzXLEeZ0lq75KoSSSKPC2ADNHaZEINxjqkkBMbbqiRU9mzd5HTE245CQ==","_npmVersion":"9.5.0","description":"A micro editor.","directories":{},"_nodeVersion":"18.15.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.5.0-alpha.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-alpha.2_1680588394160_0.9732796564692996","host":"s3://npm-registry-packages"}},"0.5.0-20230404060355-e26ee252":{"name":"@blocksuite/virgo","version":"0.5.0-20230404060355-e26ee252","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-20230404060355-e26ee252","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"d7b3e1ccea6e35bea4e30505297bc91819313150","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-20230404060355-e26ee252.tgz","fileCount":152,"integrity":"sha512-7vDGdKpO6TRMtc9ce3yV3/p5But6mjOJf98Cn17uA561gmv7D8RdMnw5CthsQHdAjmCOpqzlxZFFq15b8TKEIw==","signatures":[{"sig":"MEYCIQCxcSyHeNxswDIvrP4KNq7scrnEpcIPDkNpdvcYatjGUgIhALVIgRllnNvQP/xpfRx7KhNKF64PAAaZ/lgRCyPOImiZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":442024,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkK783ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqjsA//YcKmImY0WyhnX3p1l79XKJxM/Tlx3++rn5SoDK7TgFerGYgQ\r\n4qntMZg9AXq3+VX1Dasi+QZDnd2UpKU0Sod1HiYwASbrKlbUgNirtulBOMHv\r\nt4p1aEZKzJKRyBKINtz9/CIRrFDmnat697a+LgBkfs5uYwuz1PXBsOdD9ZTI\r\n72T0AxHLDCjSK+5hKxz6CfOcQs/pVicM4rZRIHldRdSjzyQTQxqCxKKIZG3K\r\n4NalblgZNB+GNS/ox6AxS7bUhbbfval0K+1TFI5vuGSeu2AVWQtlGIYDwAGy\r\nUnd3SDUoAAPEobqcVTayXzhGHG4PpgrRjJwkfjcgLFHYQhWh2ErnMmpekLCc\r\nH/u1Mfyph/Uj/zQ5y6ZRNBEmHAjMgbBM5LmRsdaZ8S5VCksmBZlqnmfw1hml\r\nsyhF1L6aF3zNJEV4ScPiyy/xczp5MuI1YwtJQKLcPmt7NZd8Ae0YrYX82SQA\r\nsTY3CkDaXNMfwS3alP3zgeiU4OdptorMU3tPBVZ+pY183FDR7IU24j0ZzO8T\r\n2NYaDLlOdWVgSjN8SVIOsyYIuMYNgPHcrQ9a4t0VXPnKCvCWMoykCc4mMBGx\r\nv+DHjKCLPXYjM9blSLixU4zTzNL9EH+IIAbEPkLoL9izWp5TU9J5M/6eJcy5\r\nxkvbs2kJpAjJRPIVNQc17nN8A85eBB/LqYI=\r\n=sEUC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-20230404060355-e26ee252.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/a3f4d8ab67dfb8ee2a5a22b4f7f62ccf/blocksuite-virgo-0.5.0-20230404060355-e26ee252.tgz","_integrity":"sha512-7vDGdKpO6TRMtc9ce3yV3/p5But6mjOJf98Cn17uA561gmv7D8RdMnw5CthsQHdAjmCOpqzlxZFFq15b8TKEIw==","_npmVersion":"9.5.0","description":"A micro editor.","directories":{},"_nodeVersion":"18.15.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.5.0-20230404060355-e26ee252"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-20230404060355-e26ee252_1680588598803_0.9285246511613754","host":"s3://npm-registry-packages"}},"0.0.0-20230404211759-4cf51928":{"name":"@blocksuite/virgo","version":"0.0.0-20230404211759-4cf51928","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230404211759-4cf51928","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"fc5364cf61e6f6fa143fe0afd8a753fb2b4f2569","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230404211759-4cf51928.tgz","fileCount":152,"integrity":"sha512-G24kb5fW90UQYsg3Uktx3mmNTAMl6jz8p3NQ7RWk04QvVACn21hMZBRjWx/vGO3kHJn7J5eSyQUUFC0lSZ/m7g==","signatures":[{"sig":"MEYCIQDJnbheo/z28M7pmz5CBVN3f5Tyy/jZf7QgYxqmqQzHVAIhAINY2pDpwPelAEs4EjcZDifs3lnfOOdSv4ddLofYyeuZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":442056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkLJS/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoixQ//d7AcC/r7Y6FBoYY4Cp8l7n9vmICMlDcdrVs03gUNtztzh7LG\r\nBUAaLJpdeFhftMGgrpfggJSAsd8s5QCRjLXWn65rJunmuq/CQrgxJZSUnJPJ\r\nZk5O73Vmw3I7uoHGRjEkF1kDAYIPuHxsuorY6kXkQv7Km/zVbQnRn4VeVv2O\r\nPOZD+44l48DEQuLuAn2UXvQZ0pby1eRFEshc9gGQgLoV2FDRas5erNTwmAl9\r\ng/vgYfs5La0cV0Y83qptvhSFAvqsdm8+DiXC8VvmYWiJCPXV/x5zgY0pI/e5\r\nCDlT3dSY4p8vK2H8qlHaYl+lmbDaw4500ZhE1S9t3zGPut8nzFMGDMwX3JL8\r\nsrlLz+oikrR8GSwCPWQZWxeK8wf9TQA82TIfY1DfQ7J7uM0BXtgIpBxP5WLf\r\njflVJT5/htmTO+KUi5I4RRCK6hbDdKwNqXFx0QpcUpR+w2pi+VI2BKVkTbvT\r\nmEUWjikvJAf+eGzGcS52NnsoFYOKhqNWngqg+4SXe81jOSHziV5VN28Apphq\r\nTdJDWQgTrtJ7CZwJWIIYVMWCrx1KDWVoWA+CR/gmH2n08ncM/mwjRHisVlP+\r\nYHMSI0RY0oPxH7k+bW5T1LiYHfr8REwp4gCKpa3TkrkBAK92JfeA9n+5NXPs\r\nGoZdqQWMEyHpUbUyxf+ego+GL9RE1pNMaIE=\r\n=FmEy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230404211759-4cf51928.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/ef96d1addba7eb7b2193809b393d65d9/blocksuite-virgo-0.0.0-20230404211759-4cf51928.tgz","_integrity":"sha512-G24kb5fW90UQYsg3Uktx3mmNTAMl6jz8p3NQ7RWk04QvVACn21hMZBRjWx/vGO3kHJn7J5eSyQUUFC0lSZ/m7g==","_npmVersion":"9.5.0","description":"A micro editor.","directories":{},"_nodeVersion":"18.15.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230404211759-4cf51928"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230404211759-4cf51928_1680643262971_0.895745765118396","host":"s3://npm-registry-packages"}},"0.0.0-20230405153006-9483b657":{"name":"@blocksuite/virgo","version":"0.0.0-20230405153006-9483b657","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230405153006-9483b657","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"65444dfd3a539ee2db9b76dfb9711489626ef66e","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230405153006-9483b657.tgz","fileCount":152,"integrity":"sha512-dTCc9FoeVOhlWisCSycSWPuNOorFQgyXmoH4i8xma3CQbrmAE1vyUC6aHUow7H5LMNZpf+mNTED8fac5u/9P6g==","signatures":[{"sig":"MEQCIHRhEC69Gi+FEytIKOj818u6Lr3VBKlb2Bnrmf+eNGx6AiBl0et/Zwudgq9gr+crOmspsswda713K5jm+4oUmBPhzA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":442056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkLZWiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpbqg//ek1nFQK4+3+/HhWSmdBpVaz4kOiKF0bk18YdjJYwKXH3/0Lb\r\nyzBjUHaTLWMfL4sRcD3svSI5fxzbeuXf9NHkOYRiizj2QiYs0Ad9PROplaGM\r\nhLtnVg1RO34JYRwj8w6egQvX6IzMV7xRFEUpqN44jNtdXrdG/Pgk64LhlSMI\r\ni1fPgEpPG/q6bxmE2HTpI9/gT0gsDqBtWMWVyx6im3JtWV3yAjMS9M0T0IEk\r\nhjpIEW3JmclrYUV8pSyqSVhyNOuxSCeHKTdzn83XuCoaVPXqejNzrotGym6e\r\nqPfo1LZvDQwnndmiibFLlv4Qx1vkvjIeuGAibrGfZtoY7TVEBUO3VeQopTQV\r\ndpbEpbW5+aIJmB3d2QqrTMJHAS0/qEnLowpS01SMxgVzmHvd1GQQaAgMmZ/T\r\nk/0rXAHYQqa+ZUJMmsJPBvecm95Zu6iYuGlARYBt6ERi8Fu6s4dhap8L6Swr\r\nLWTzkGIFOhQU95yWkD8JRo3tzELUdPMuY1wmlK+C4iP6x/PYvQJg/idAfazg\r\nT5zb98OuwFNumRe8rxP1GJGmOAKG3HDgIl3Y6/7d2EetKMOFRarxhael6C6t\r\nDV/iR4SoFkqK/iJqaI4bmwc8BS/iuA5I9OdxXZEqDQ3gc7AGO77AxQWj/b6c\r\nNv4uoZtuC3bLgah6BztOtey5lFTEjiPwAn0=\r\n=o7lV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230405153006-9483b657.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/dda6c9d5409b73edba0ff4d583800801/blocksuite-virgo-0.0.0-20230405153006-9483b657.tgz","_integrity":"sha512-dTCc9FoeVOhlWisCSycSWPuNOorFQgyXmoH4i8xma3CQbrmAE1vyUC6aHUow7H5LMNZpf+mNTED8fac5u/9P6g==","_npmVersion":"9.5.0","description":"A micro editor.","directories":{},"_nodeVersion":"18.15.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230405153006-9483b657"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230405153006-9483b657_1680709026011_0.036916806368245014","host":"s3://npm-registry-packages"}},"0.0.0-20230405154041-de2f96d3":{"name":"@blocksuite/virgo","version":"0.0.0-20230405154041-de2f96d3","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230405154041-de2f96d3","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"e45d3465085d7d1b1f14760f0cffd6c2bf953a49","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230405154041-de2f96d3.tgz","fileCount":152,"integrity":"sha512-0UM2x/hWHYZXDvqMaUfBgtdNVmGYQ0WJwsYWlVmIKsJQZavun2+V2/e3IWme9kIrw179RXjMhAw7iWhjX0zQ/g==","signatures":[{"sig":"MEUCIHnqgeEi75UlQgHA7R6Y3LmKr44r+qd+R9JmggtOlkgUAiEA+rIrX3a3G5FV1/i2I4yI4FJXkxmpzUQExM2TNbqB2/g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":442090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkLhDoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpAvA//ZrDkLJD4Q4PDRn0MCBiO8+O5BrJL7AgA1p+gjo4F23hD3BOW\r\ndcpVUitcuvjTzRu8P06l0UFGZchjm7eu0Hdft5Sv9t+uGFurU621bpqr9p5V\r\nM6BQLnbyDLHcMo6RmWJB119o/x/U/4pl0o5JTDTcJG2zlVgac45jOTTTRbId\r\nRwnKYxD5T1zh9eoJ84/jbvtknIi5ghQdeyB62Vxj+4sovK8JgpvqKxwSQLxx\r\nCE9PqHS2RrCOfMv1aBYgrVPf2N/xsSkGWmmeMU3dAmc1B9XLXOoCBw84krD6\r\nylniKGcrCaeqOyix/mfS9MoMh2zorXZaTA53fBQ4XciKVzCazIpqXDE9FlUB\r\nCdjJtZZ2VMoW/Q4TUj/aI4Lu3wcCOtanWnFG1vR67Pa0PGVzN+cOdlgh9VUQ\r\n73fkfk1s0Av91vBrbZorTo8r5EK577hhnyXiLbF7SD7EEfCc9EpJwDPdooe6\r\nD6pSswGsf4RHxmNPILx3xqI0KsPraVEtgg3fBfhcaMiUQine5Ze/MFdc6N3F\r\nHVc+LgSgiaAhwosVMY0ktRxQ7oLetbuPRexeSMzY1btx4b/8sbWsSNZRcf3n\r\nHa0jHFnnSfMZ+1fF7M6WsTcGKfQwdiaybSEt/WzYjKcet8MZIKfD1TO5Dt6M\r\n+kZ7yMIVbW0JmXgSo/Mue2Z19AIou55xcsw=\r\n=rPg1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230405154041-de2f96d3.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/9e305b6133462ac7d531c06e42298e96/blocksuite-virgo-0.0.0-20230405154041-de2f96d3.tgz","_integrity":"sha512-0UM2x/hWHYZXDvqMaUfBgtdNVmGYQ0WJwsYWlVmIKsJQZavun2+V2/e3IWme9kIrw179RXjMhAw7iWhjX0zQ/g==","_npmVersion":"9.5.0","description":"A micro editor.","directories":{},"_nodeVersion":"18.15.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230405154041-de2f96d3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230405154041-de2f96d3_1680740584184_0.6685321446535673","host":"s3://npm-registry-packages"}},"0.0.0-20230406032111-01cf598b-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230406032111-01cf598b-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230406032111-01cf598b-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"2e00d8cd1a43828125415405a0aaed3cdc7ca746","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230406032111-01cf598b-nightly.tgz","fileCount":152,"integrity":"sha512-dfqiZ8eZ94A3bixnruUyC/T91UkqwgTySu/V/cimztsSDLR6HCL5Qmf9zIKc6Dc1lob4XZniU2KDT+gHjZdZlA==","signatures":[{"sig":"MEYCIQDcZlimPRoi+lV2Njrga1KKoC6CzCfnqv1wg9PxjJ5s/QIhALj+oQPndxuUVdEYW7y5F2UwZzpfqOwsoodqg9wiAgq+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447289,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkLkQCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqbpg//RPxkK0swcD6kxvbVc9c1JlMS0mR0jdU0Jn3YwpxQ1JMv9Lot\r\n6ttp0h5kxy2LIOMgSCk/FvtAD/LgIg74TuNc4/Mmew0QCtm7BjBKAIiwfg2e\r\nGlSMs4nhkUS7BlzqHsuFO4ppF9zKQlscSwYO8vwEk0mi4MGtJXYwbApwOI5H\r\naJRIslPXXib3xqoNRT/xi1BymG8DWnjfO8fbh/UsYhKqPhFNkkAeRgmitIcw\r\nZxAdu9SD9p7xThc+SczgLZfhR8f7aGK/j2XpvUr4ft0yTUDpgFUBDd0hWW7n\r\nN/zGYarrcE8EecRKbh+uoAnfI2RcgSYl/Ki9Xj6fId836++MAt3kvPGYZHxE\r\nanWBG53pNroJa9vSb737KAP/9Zvgfas5OVlh1K7bFsPutD5oKV0COyHD2A4Y\r\n5raaEeYQQauUC5hobNMM5p29oTLPR2sEdpNixhVSliNXDzkScfoBFH646skV\r\np11mA40wAl3mb+TVzCpX7VaP0t2M2vabRqNgT9j+rmmixVNTP40UMk/wMi1N\r\nnCGiXCzYo47hB5+AN27jmNVvdN+Bg0W1k+gFiUWts7lE5oLHitUdxSFXLH5S\r\naTfsO5wJ4PC06cVLb93jbc4MlPNXo4NJstN90zjhfPzH6+Rn4UcxcgmELBky\r\nUFkiX4DaxQTy0AMxriyOJZMwOo8Z0RN2mh4=\r\n=hlcS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230406032111-01cf598b-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/419f235a2848e2dc4f6f1802131a2ded/blocksuite-virgo-0.0.0-20230406032111-01cf598b-nightly.tgz","_integrity":"sha512-dfqiZ8eZ94A3bixnruUyC/T91UkqwgTySu/V/cimztsSDLR6HCL5Qmf9zIKc6Dc1lob4XZniU2KDT+gHjZdZlA==","_npmVersion":"9.5.0","description":"A micro editor.","directories":{},"_nodeVersion":"18.15.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230406032111-01cf598b-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230406032111-01cf598b-nightly_1680753665941_0.9666357059016537","host":"s3://npm-registry-packages"}},"0.0.0-20230406182220-0e8dac41-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230406182220-0e8dac41-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230406182220-0e8dac41-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"bcaf12f37d030ec26a3f92fe00d8516876a72df2","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230406182220-0e8dac41-nightly.tgz","fileCount":152,"integrity":"sha512-MbQlZad9z/0D9s3aIpp9xSxY+RINYU6JD/Djbr5Vng5AI6lEUJlzcHQhgIHZBILk9B3NXGh0JbWidmPHWd+BHg==","signatures":[{"sig":"MEQCIAoSVIILN86988CcSvyuFIzYF9MQo2aSKiJflME6DSqbAiBDpN84AS8cqtCVIVRoElhpRQbNN6PUm+zXvJL/VAqJYA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkL2JLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrwjRAAmLf63BU3Juiy8vBszw+LEe6o0hwqJaD+lDdrC3RSqCY52pnO\r\na4g5ybDkaDHua4vZ8ivx0l3Zf402ws9+8bKH/4AhbhZozYRSLVFo+0BQWaSC\r\nWVNvhNXAMRQp1EHBLbqpI6kGLvuOJrlPfxIlmPUSLvtuOVOHK8lcKsIL0wes\r\n2WHQZLqfyLedcWBT7XARwF7zpKI0teHpuCoSasUvupVh3q+o4JDx7serlJm0\r\n6yXsPAsZQiMbwoROQD0F2QU3QUuD2EJz9LGZKSSTfFq6SYr/RN3L98yDCFoP\r\ncOpUWXVSxQqqCV/ZtRxh2gNeoYjmPep8CTE/M21nCm+9Y6IKmgIrufhuTQfF\r\nkfL7+xHPV75LvA/uozDndJIPhshNj2VJLBPX1SlO1JEfArId/jw8ae7GVqIK\r\nPSnG4bHsSbEWeuN8k8EJ9S9GoxnD3w5WtkqEJK/7/0hQfsnEdmPMBt3oBxmY\r\nsMR5nNnWQhI0GehkjhXuuv5R9d6KfVYKjZNiqWDE+CZMg5vwIzcA/aLkeInq\r\nxSPGObIxUNRy0cRIjIcpO7BaQlA8/boPk6ZujaWMSqulTqyOsBL0dm/d48HD\r\nuyU8m6jhDRIVtHuoi4h/fKFx/+awvq+zBZenG2mC/x8Sr/VpUSN3lO4uObeg\r\nl9xSBB7OJMzd9YibPoySEUXb2PvBoN14dIM=\r\n=u009\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230406182220-0e8dac41-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/ba3887e190eaf96367927ecd6927c75e/blocksuite-virgo-0.0.0-20230406182220-0e8dac41-nightly.tgz","_integrity":"sha512-MbQlZad9z/0D9s3aIpp9xSxY+RINYU6JD/Djbr5Vng5AI6lEUJlzcHQhgIHZBILk9B3NXGh0JbWidmPHWd+BHg==","_npmVersion":"9.5.0","description":"A micro editor.","directories":{},"_nodeVersion":"18.15.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230406182220-0e8dac41-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230406182220-0e8dac41-nightly_1680826955272_0.33916299464773747","host":"s3://npm-registry-packages"}},"0.0.0-20230407050457-3cd70505-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230407050457-3cd70505-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230407050457-3cd70505-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"04ef43c5e1014a26480aa1fa35fe36a688c93ef4","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230407050457-3cd70505-nightly.tgz","fileCount":152,"integrity":"sha512-orV7jAI/siOkuXH6yQAWFeZWteNe4GbZk7UaICc3oSYPQN+fGIjVrGqIF5i1Of+/OCuuz8xrnetB9tKFEhgl1g==","signatures":[{"sig":"MEUCIDvtmG2WngH6CCC1uKMGJCLzvvZS+x7aMACbm7asJMPUAiEAi1d4G56P3VJV8e0A77k7PaRY/eCNJ0wyORracTKkN1Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447658,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkL8FmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq59RAAjc+7pZ38DVJBKOngI+X1Tj4hH6aC4XVXWDHOS8C6MEXe3MsU\r\nRaWo7O67nckVpDzpKbr2lh5kM5nTdrLiJTi6QIxFkaBapo/v8bML4cU4gV36\r\nHZ8qWKZwzsvLAalBIiRHTVX0h3agxGjvATVNVnW4COLjIaqjmPox8juXDoTh\r\n/NGDcY+D/bWvNNsrldpqb6ZkT4A6OAQGvbvEdwsAna8faVRJDUfGuE8V93Eq\r\n0ukDpCoh2zZcz+3v8WXKnFYUO4pq/Kd5puEr8sRUzfczsuoRmntJsVkJn/p2\r\npoz4i/LaRJUH9ee5JGUIpEvKPbkSiuo6C1xJG05loj6tSfWp1LriuOIeW8GY\r\nZHKuqXBJ+OfFj40TbhYw2sKQXAg+GhIiUHLppQik+KtZqMc4RHrFUpgeiNYE\r\njIGRAd8sKaFloE9UKWsiFDJAf/2caUQ3A9A1EL72pmqrbM9APM1+1uSrMgh6\r\nRmZey/KiWC2KkHfk02ZEX/zmSB5YD5ppjmkqYDmPJ//Tm6V0m69PUOhtQlN1\r\nmmBklf3D9a5C9VIzH/MdZwQleJJxxMY+J1re0bp2zKCN24KDKND8NxVPVpdr\r\n8QgLTmzygR+no0x+WkEBN89xvWnzbOHeg5k5IE2waoY8as7p/Ktwm3b6xe4T\r\nyWnWE9ybSGc9ED4R9AJVQFhDnQNZx2UK6i8=\r\n=D+zv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230407050457-3cd70505-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/1d740e63cc1695d6c802ec667a1530d1/blocksuite-virgo-0.0.0-20230407050457-3cd70505-nightly.tgz","_integrity":"sha512-orV7jAI/siOkuXH6yQAWFeZWteNe4GbZk7UaICc3oSYPQN+fGIjVrGqIF5i1Of+/OCuuz8xrnetB9tKFEhgl1g==","_npmVersion":"9.5.0","description":"A micro editor.","directories":{},"_nodeVersion":"18.15.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230407050457-3cd70505-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230407050457-3cd70505-nightly_1680851302516_0.6851160175867992","host":"s3://npm-registry-packages"}},"0.0.0-20230407072653-ba36ca29-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230407072653-ba36ca29-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230407072653-ba36ca29-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"237f0244b7f3e7a789230a39219d906886501e2f","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230407072653-ba36ca29-nightly.tgz","fileCount":152,"integrity":"sha512-X1RJ18ybGZsweIeHRutI9Qgt3KzHNJaK+lJzmj83AgIf5/it3LbagB402VYRfs1gbYSEjkz2dPajMe7XFUgvGw==","signatures":[{"sig":"MEUCIEH5MWkR52m4AICYN9ltV5uZ1GF7fFF44rlPeaN9pWxmAiEAl6NR1NqD1ymbpxYS3rAjXD10dIt3jp4b6UKlnG6i5xI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":448263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkL8aDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpG0w/+Ik17rtRJ3TGeIa2fyEhe55RDRcnG9mzWVHCWNNE1tI95VJXr\r\nSOPWbAO0N5YWfDZybwU0vJty5EC2+5OmnEoJaqBWwBlWyNSPOHmjeY1+C7e3\r\ngOXjmUr1ihEvrVlYOXwcvJAAxStdlO8P2vEK96M96ZvCvx4/pP4r5JKHpGK+\r\nFy3ox7xITzRrHsI5Q2A3fLBZ1L+XmG0JGCWr+OGmyQr3yaz2SVAIMv32WS3Z\r\ngu8tuLwBRAMXvE8Zj0kL5nAhxReDBRM6RQ8/MTLwzNAeMhQEbLoTNXtMFiN4\r\nxCld1AYr4C1xh8Fk7+apjGaqWby35SR75J2eawbk7dUeV7REmOD39FrQlZl2\r\ntNkeuHZJYZ8bcOQDKl1cjsfqU98LzW08u9kzBug1qhaGpxNdqCtTepp6chcr\r\nf3scYR0+kvrI2ZDWHK+q7VT/XW30/ni1Ekp1wJ1MEqOswfpSQpQ0AUL2Dy21\r\nEjONw2v/6pYZCwutJbPNUZe5h6MvQjX0qZaTmey7jJ2ph/g3RAYblq/1E0CA\r\nK32PYQILwaoCnaYabFNV5I1Tj4ZoDZXx23+4DisTX4SZi7Mwt1RQY5i7BpWy\r\n1W8kUOONYgjAFAp7cve0/9LmQBGH4sr7GtDPeaI7kH/wwsbRmx0qK9LSEdc5\r\nhcQW+LkQOqMF/iW29aWHVSgQP9QMuUJVpHY=\r\n=RsRS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230407072653-ba36ca29-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/96c061fe8f754976e30ea830221aecf2/blocksuite-virgo-0.0.0-20230407072653-ba36ca29-nightly.tgz","_integrity":"sha512-X1RJ18ybGZsweIeHRutI9Qgt3KzHNJaK+lJzmj83AgIf5/it3LbagB402VYRfs1gbYSEjkz2dPajMe7XFUgvGw==","_npmVersion":"9.5.0","description":"A micro editor.","directories":{},"_nodeVersion":"18.15.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230407072653-ba36ca29-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230407072653-ba36ca29-nightly_1680852610991_0.10402291308077327","host":"s3://npm-registry-packages"}},"0.0.0-20230407131929-c9a6bb18-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230407131929-c9a6bb18-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230407131929-c9a6bb18-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"a1d8e4abc330c093651ff289afd8bd7c6657c416","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230407131929-c9a6bb18-nightly.tgz","fileCount":152,"integrity":"sha512-xQnkkELoJCMAPGD3yCpGYRXN5cWJcsRtIsT8qiybVZ5M/GjXZZjLbMtx1mTXO8cYMB5hhjFWK83GUiUE+hFgXA==","signatures":[{"sig":"MEQCIGCmZokCKQu0gRjOLQGbDrM06BW1rWYwE/bHb82r2T0vAiAgX4FvYTQOM/7fIPo/SlaNfOOJgIl1DjVE77GPL2lPFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":448260,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkMLPeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrvCQ//V5j6DaTKaN1tY52+ueXg37T1ckBpOLpOTvU5M3jxbORfbaKR\r\nEW7vt9Y+EGmy8X5mr9ieAZzRGMk0xS6kuumjV+4Xqj+cjPBnrIkLRDKMWwJC\r\nUBwc3PVqzgV0Y7eA8OU3+dOSXHEM3FOa/bqxxcSFQfqdwbasSl4eWCxGha7r\r\nYS76So4Um/AfQgXhhDbdUXmJgY5vg3VqkIsL58mh4viLMQkDn8zp3PUX+qoJ\r\n00XZ3wlhZlv6u15ArCIa28hWqU04hnQp2mK0qq24YgW5wuNjG23wSvGEV2T4\r\nGBwKwCop00BRs3XeJU1wlBfeiwMuFDKxmErDe9/Cxr0eorTzQ5q2GGRTWHKh\r\nyiSSye6fTSDkLg89PscrPU5EJXdm273BNop4fT6BD7RniNoMjERrIDjZYuxO\r\nPSX4d7UMeN9YtzlWP86PZ/o1fZIcRKAPrJxp0IScRs3QJ1NNS1hSSKG5eWLS\r\nsD0LHlvkK3vjXu6zmb67h37A9G1hJlkIq9EisRdYB8cxTySBhYhkwIt/0Tqr\r\nwpgiiEL0pO3B9dM5tTHNnKCnmPQtGzEq7tdivv3nOVlHkfkukWWWt+J030B/\r\nXD5askSIxS4eHLNiJbkhrbyAjpiYRDtT370nE/ZUeGs29NJCbVtN2P3xa9s/\r\nLVzHjZszgKtbqbJBUis7pHxfC9gtqtYvfoY=\r\n=R25t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230407131929-c9a6bb18-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/2f9be2ccf109f4dd39ceb954fd03575f/blocksuite-virgo-0.0.0-20230407131929-c9a6bb18-nightly.tgz","_integrity":"sha512-xQnkkELoJCMAPGD3yCpGYRXN5cWJcsRtIsT8qiybVZ5M/GjXZZjLbMtx1mTXO8cYMB5hhjFWK83GUiUE+hFgXA==","_npmVersion":"9.5.0","description":"A micro editor.","directories":{},"_nodeVersion":"18.15.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230407131929-c9a6bb18-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230407131929-c9a6bb18-nightly_1680913374491_0.4634084066640589","host":"s3://npm-registry-packages"}},"0.0.0-20230408172438-a2855a6e-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230408172438-a2855a6e-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230408172438-a2855a6e-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"36239574c5bf6de115f0474ac005c38c25b70ffd","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230408172438-a2855a6e-nightly.tgz","fileCount":152,"integrity":"sha512-Psi+YFQwJ4aDidCKJ+kzm6X8ozLnIeuA01nC/YQPVxvMHZNlWfZG76YTjv6fR1jXeB5k86SkBcF19zn07hYKUQ==","signatures":[{"sig":"MEYCIQDCAYAiXGx6pfJylt57XXdTfLUpvRnenzEWWh9XjyojfwIhAOM94UNq2qqmh94D+dBdtBjCqua1yfRlSo9ELvS98sIg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkMgYHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7nQ/8CKyln14n/RxeS8oK3ZKWjwLqwzpWodg5lXcU+bqxDVF2WM1h\r\nfATj7JeJtlqmGMm93AR+f0UPVOjbCA6OWEl9n+SFlyrQNejOwEFKXPUkfyOv\r\nGyXaitzBwo71gXqwagT8n6jByYCOX5pDYA1l+/MvzjSs0XV3rKFFbd7ClEP3\r\n4P2dFRPb0LncfZxt5sCs2ltVtyDUO11hOWvEydWSP7Y8uDzXn33Wz+SgoIVC\r\nVUnmJ7NUCOax1rZbzfAY+/V1sj2TSp8IhNJts2gc2UQICVi+Iw+4L9dMLRi3\r\nBGp5CqzQRiGw7A90BePvTOGX8ALePTnIa9sqqSr+5bA5fMXK1SL/AbMrJel/\r\n9u5LB0A8F9n0kRoXXE2wA0O5THiUMTnw+O9STpv6IyoqxqSWuyptY5r3lK0C\r\nITJqZcneSVf7dSN+zmSFg3rUa79NlG2rkPEMM49b7Ix1kujaf6kAPGQSbAZZ\r\n+VWudPmm+QZxbKN8y8CiBrM8eBqLXS7zwr7D6ssTnHVzd7IhHwOVJ5pSE8zp\r\nrSR0mUvSPlLoSKRLBUmimfBYC9ljZDhg209zpcHKOLu/ah3SBiDaOki7sOCW\r\n/3LFgdJ8mlnzgVCtpierU2157s4jDeypd+bDWnfzHcLtuYnpUwpf8NvvPQIq\r\nh4UnH2mkZCOAMQtUzIugua2gA2camNGgaEw=\r\n=1Ce/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230408172438-a2855a6e-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/f298d373f36c9dedff785f01c35582ab/blocksuite-virgo-0.0.0-20230408172438-a2855a6e-nightly.tgz","_integrity":"sha512-Psi+YFQwJ4aDidCKJ+kzm6X8ozLnIeuA01nC/YQPVxvMHZNlWfZG76YTjv6fR1jXeB5k86SkBcF19zn07hYKUQ==","_npmVersion":"9.5.0","description":"A micro editor.","directories":{},"_nodeVersion":"18.15.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230408172438-a2855a6e-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230408172438-a2855a6e-nightly_1680999943755_0.3437035446659522","host":"s3://npm-registry-packages"}},"0.0.0-20230409084303-221991d4-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230409084303-221991d4-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230409084303-221991d4-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"8a3b50e42c66ad7c32082db88ffcb30d453ab4fd","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230409084303-221991d4-nightly.tgz","fileCount":152,"integrity":"sha512-PzJ3+YQaKamSUo6aGzR8iNBFT3ld3jOoJ75Wfz6o2FeAJbFb16bwbn4ySY2idECx6jBgzDb2+GU46M5ApXLaqg==","signatures":[{"sig":"MEUCIQCcnRkNWqkLcpSlv3DtnsyliOdkhNxDd0a/MbOpeGL3bAIgRDs9bL/5UVzB7gY4m4Cpif8f7eX05sGBOrqk5p4fH20=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":452428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkM1dwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqL3g//TQrBUG9hbjK0lr3IJG3WnwQ60D1LUJAtkx5DfP4HWEUQnNeN\r\nksxcHkoOQcEM1grKq6/YplaLPcWHIDEqGSlG5ALsRLeOamjPZLd38V8m1q7V\r\nhkozLFOjgQS8pr9KRXd3+WI7GCPG2/qvdM/orTIzRtkt/GS3yb1cUPI5NGIm\r\nEUaXadmCvJ1SiLMNArGsPRrEnWcpGBw/DHmZozRar7LdzFkLwsr+/5bMdaOF\r\nLKaguOWNGu7K9n5B9ctpg8Nq8fBtdhLq4dJkeIfSOCT4Ru+yvrt2MtgPRApJ\r\n/8U2TYYfku3aMphWGimRuDY8OOhV3K3EWDF1VfYUypfXOPQ4xbr78o8Qroiq\r\nvuBJxPFkUdnwgG6EBu6jdBC4BEME/Pxetn6eNnlS2HPObYCDypHCjH1aain9\r\n0PyJMe1GEdZ+Vh00ff3IqiV1w6soxvIWWGnE8D/HNA8IVs1xwkykghnVd3pD\r\nEpO06tbaNMXSUFXew8Z/2my8o/h9nETeYrPHLjm9k3aFgeUBHqu4884djPkV\r\nJB2l9JUch1pKPQuxoZfDntUQi5khFMWDdGdjdzxe3wWikT2FPdViXqQiDhEv\r\njNmxdV3fnw0bsOuZcv9GVrplxTygg+b30S2np96nHR95IM2sORr7nLCLWybp\r\nbWFpgL/N60ll+DmHV/LisI2foaDOZoMW6uA=\r\n=0xT3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230409084303-221991d4-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/5b553f8205b346ff684534ac378ce3fd/blocksuite-virgo-0.0.0-20230409084303-221991d4-nightly.tgz","_integrity":"sha512-PzJ3+YQaKamSUo6aGzR8iNBFT3ld3jOoJ75Wfz6o2FeAJbFb16bwbn4ySY2idECx6jBgzDb2+GU46M5ApXLaqg==","_npmVersion":"9.5.0","description":"A micro editor.","directories":{},"_nodeVersion":"18.15.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230409084303-221991d4-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230409084303-221991d4-nightly_1681086319912_0.7878582937180234","host":"s3://npm-registry-packages"}},"0.0.0-20230410103618-089e5b37-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230410103618-089e5b37-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230410103618-089e5b37-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"5ced213d6200299267cf375ab7b2e8bab8f3c371","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230410103618-089e5b37-nightly.tgz","fileCount":152,"integrity":"sha512-rD72OtQCeaUjqBYXKw6DU+jnRpXp55gwKoON553JfPvioegRB/DtFXGuiMOU/TNIw6YpfXc+n+XmLNy+EacZWw==","signatures":[{"sig":"MEUCIQCjf92oNAr33+6f8tB593xgrUv7FvcLtSOKv+6YqTyNFwIgUV5qWtScuvZsjso6RMgLm4Tnw6gOoWqw3wbKe/38vms=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":453163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNKjGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmob+A//b9DxJgHwh/hfikcMkXcubmt29LmKf9F8RkLskYtnhyHJO4E3\r\nMe9GkVQmiwGgfxs8dY7Zm+ADSWqLvLfS/1w1PJsDsJXvYpJXkI2IsFWyfs6n\r\n7P1v0hWIR2ujU+V+fjVjGdgGSIhbkeFF6W1oJ8kkninAZ9/AZ/Q5qxsa/p2Q\r\n6zDyYCIgcVmXjebbsT/nTd2sn6XVQ/JUE0HSX+l/adph2E97i/aPdCFAfCpr\r\n5HMnm8aaJiob9TLz25dkqiXhOK0mo7oZcqOXK3L4KXGgmxrdwTBIraJyGsvw\r\nKSvcNcCXmDOvYoewEtJW9v8H78PHhm3BakiJ0v9B/WRwnjVLJjcH6F92z1f9\r\nODp3YppVlgfS3z5CD6x+Il3REjHg/ly9+xgInjB+Zgb55g8x8aviGWhbH7xM\r\nM3lM2T53gssEmxwQyK0WP/RKCAo2Byghk70m0jROJ71la9z7f9bprqnOf/DX\r\nHBZKf3GZsa8OxhlU6dMBA5POCLDOet+9u54+KjsmEJrJFAoxSmDZR/2oV5vD\r\nerTzXIvM0q3C/18Lyy6EVtSvM7mWjRfZoPt4Ill0s6FgoYv3ejLeFMFtAeC3\r\nv+w9JZqIg+cFdrLAc581HUHFxiYeSodC6/01VYE5Z1+Wrc4g8E5vN3k+aq8g\r\nuUgqIXo53OZnWsgpGS0giu9WUwctC1ni0BM=\r\n=FdWH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230410103618-089e5b37-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/6230a43267b2c3c57bee54072f27d5e1/blocksuite-virgo-0.0.0-20230410103618-089e5b37-nightly.tgz","_integrity":"sha512-rD72OtQCeaUjqBYXKw6DU+jnRpXp55gwKoON553JfPvioegRB/DtFXGuiMOU/TNIw6YpfXc+n+XmLNy+EacZWw==","_npmVersion":"9.5.0","description":"A micro editor.","directories":{},"_nodeVersion":"18.15.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230410103618-089e5b37-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230410103618-089e5b37-nightly_1681172678564_0.695516005065526","host":"s3://npm-registry-packages"}},"0.5.0-alpha.3":{"name":"@blocksuite/virgo","version":"0.5.0-alpha.3","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-alpha.3","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"e5a8890496e9ff58117b0ac0739fc1015c025acd","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-alpha.3.tgz","fileCount":152,"integrity":"sha512-jfwlQrTJlqBvpHZMUn6ZeS8stZAHyBqdXv1KzmfAeFE7FNPxLxOvr1Q+GRq01bLNu8+YPijh+eOhHzC7zB+Zyw==","signatures":[{"sig":"MEUCIHvW9FEQ1vw6yUmPXrRZC49/nbv4ezDiMNTsTKtDq0RzAiEA93h8pzp5xcEvflWb75S/zlSYjnlBwkEbnu1PTpx+Up4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":453331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNOe8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpy/Q//f8rbuC+VyuzfnHeYmK1uIYeo7c1simVrJDgwPbktmbP1Lr3y\r\nAjmMXGjz/Pe357eMh9lkmAtlFH8FRm2gj057wwmySakjDmFLMEhSDPpjOJk+\r\nxt5qlIluRWfOaI4oYiRjjozRIU+wSLzCK362ZRrjdDOXIxUnSeol9/bihw8L\r\nKz/3x4TbpfqFg3w9Gp0tMM3v6yV5pt+ugk6MCcaPNwww1uj0UELhSE6F7vdR\r\nNIFIHiP7WFGzN+MGfS6n+YEEWWNrIay+6Yo/8rG/atrc5DHHbivslPWs0CCq\r\nf0B5b/cRIe/k68RfqdNKW/WoqlEwORyhQ8H0Jr0dCrE7tkFCbJsuQQP0wzKw\r\njIGtpikdbNNANSRYlRbNhUeX8P+cCvhvN9TVE/OFTuxNxFUuooJHawAdOWG0\r\nQCQJak7p4dP7SVW5Yp9j8bRaRvchyHs2fKSasN2u1M+FNah3RTz4rKMCqgQL\r\nxnySols52QmhW3M/A3Jqj5yYnEUYZJQneCPKENxrUB1NY9zifkmL7/cOOO17\r\nAlc3clK0IgIl+/rROju8yXPXM5sLpG+RMrqiTJ1+jaxMLk1V4cFkDk/0tpzH\r\nlMSHvOXzfJff+jTcU8+mgFfbdJ4p6OcVXr/Eg+nHXiFl22HQKiV/w+SNavlM\r\n3xDqzxiT6Eu88mdAGDC1YdzjZzsj0UwFI4s=\r\n=LXqF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-alpha.3.tgz","types":"dist/index.d.ts","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/5ea256fcd8bbb7ce84aac798cd8f8354/blocksuite-virgo-0.5.0-alpha.3.tgz","_integrity":"sha512-jfwlQrTJlqBvpHZMUn6ZeS8stZAHyBqdXv1KzmfAeFE7FNPxLxOvr1Q+GRq01bLNu8+YPijh+eOhHzC7zB+Zyw==","_npmVersion":"9.5.0","description":"A micro editor.","directories":{},"_nodeVersion":"18.15.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.5.0-alpha.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-alpha.3_1681188796666_0.9479741317637789","host":"s3://npm-registry-packages"}},"0.0.0-20230411141436-ec6b051d-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230411141436-ec6b051d-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230411141436-ec6b051d-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"e1403cf2f1a48e47deb095e4fe59e12b66dab9f1","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230411141436-ec6b051d-nightly.tgz","fileCount":152,"integrity":"sha512-+bHQtAa13fsYt35M7debzoU8EjpmP1s+h+T7a+DowHtjL4pta1tg4QDi0ri/vpktqAmxagKbYKMlcbbJBwD/sg==","signatures":[{"sig":"MEUCIQD3mgo6/kh937pXwrRwb2M3/+r/LIeVV5sRCvs1L+HB6wIgF1H2J9YSSWBdB6plZsNAHfHeQHRujSt6r9SxE1Q/gHM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":453422,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNWw8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpN8w/9FsVc4WtLPYfwgEBXZOiqGwEGYYE9/05uROS3FSBC3RWgDkQo\r\nb/7hPcpnhdbXa61G5OgmaXa3Fitl1/joXqX0YCWpm2N1mXlj5pnvkMDFfK7I\r\n72z9S/IIq53lkJL1/4VyTWY8lkSZ0W3fx+hV8gphx0kywpl95TVXvVAAoCdn\r\nhUbT2doFSk4EI+pRjKZ+EYP74S71Ql6AqFj1lAe883Wu2IQ61MvRl5AaxsXP\r\n81Dl3/p7eEq0D0+dBg0+yVYpbkHIAlTqKk2GUJR6bBD/PxUAYORBDf4sAWkG\r\nV+uWCZQ7CxfyeLEI7JvX4RJPL+r7Ov8zar7GiYRZUb/9652jE0ueBO/TMccw\r\nLNPxO2bkNT97vTqNrHPOdFjsKzJ0qKPYzWOJzViJGC4CdjzY+BmsAzxCfsvg\r\nmkR8tawgQ+OEvKPBlB1eecsFwvzlBbxg1rHQR8VF1Yvhuui+cEMnP1NsBjtO\r\nsxtbqk4KqdqOxZZ4lW+zj8XcI6WI979WcY9dJt1WHh/tKVpEcLppzRoYBpN1\r\n81HH9//gEx1qoQ6oGnRWncuJikSLBKfGcPhd4qcc7eK8QvjwE9eLpI0h4EhH\r\nI7wmzFIYW+Ei78OO/9Dtbv8sYZgwyWgA/y9sN7llO9AzPsT8CNbxw/PVGvO/\r\nc3eAueuRoBgHeKUmVeXSybaSaMAPQ4chD/M=\r\n=evA/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230411141436-ec6b051d-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/119cf89ce7dbd99b91ba17467469fc74/blocksuite-virgo-0.0.0-20230411141436-ec6b051d-nightly.tgz","_integrity":"sha512-+bHQtAa13fsYt35M7debzoU8EjpmP1s+h+T7a+DowHtjL4pta1tg4QDi0ri/vpktqAmxagKbYKMlcbbJBwD/sg==","_npmVersion":"9.5.0","description":"A micro editor.","directories":{},"_nodeVersion":"18.15.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230411141436-ec6b051d-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230411141436-ec6b051d-nightly_1681222715866_0.43385964618955164","host":"s3://npm-registry-packages"}},"0.0.0-20230411151359-929de326-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230411151359-929de326-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230411151359-929de326-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"c39bc08da276ca4311af0cabfe45359f45fc1800","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230411151359-929de326-nightly.tgz","fileCount":152,"integrity":"sha512-DbNdJPgmi/OI40k+qU8A1wUeNIU1G6K3NXcfk55UEA0q4bpgm0MTbMGAV8GPflhM7Oy5QbtsadOZIHN3IZ2CKA==","signatures":[{"sig":"MEUCIQDE9mLUw9utWxiz+Rlc3C+MAA3Yt8Ty7kTJO9mvFBy76AIgKIi2s88BNGQIvCxqdCSzILuOOWcX4ROk3imd2gYPaL8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460242,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNfpFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqAkA//S/at+Z3+EpUZiNEwuoQgT2DfDkCBHbD8G8fEYwGtJQecKPkO\r\nJZ+6/K4Z5eiPt9+krkx+Pb+ggc42hCLIgbnb0ReFFzP6f15uQ8PiAVQmb0T/\r\nKe9dhznDJrLl8SROadcQM70+rc7EU9CRo6kidnLfxhfdc66XpD/Ifq4TIjE6\r\nKfoVLokFMwf4WNSSVQF5UiPwTdlMs7bbAaadIj8EcSXd3ZXP/qSnHLpuaqUN\r\nIqn4HD6jikFcuT9/qMLoRygAvrXeNXevDxKaJo+N7ab8Rz51LJ6pcf+/Mdel\r\nbTIUB3gDJhuh4cRZdaco2nfJiPOOdSf/NLm+DpKPVBRG+j626xOPh6zQpert\r\nf/Y+XH6njv8jRVVWg9lw6q0MKz56gktlkJOkVpTwlwzUDVlpGa11UvYuZWz0\r\nxZmJ+RG+5Vh/GU+jHqa9visN7rn42sdBgabkYjQCetdw5oS0Q4DzvfT6BMpH\r\nFU/KxTQwnad/q2n6iWZNJVfsylXgoR8IIlmXUO3NvZAyPKrmdmU+Bv4GVPAy\r\nbFI2zhOahQtgEEn5RwB95VF07AKVgAFwivBsHVRR5fOPFFerIGToboswpIhY\r\nLyIEpSqMmgLrhcoNFm0WjhYzWs9HSaUnc7eHR3rtZcXnGg9PaE0JFwN/wgYG\r\nKWmjd/BSIOuIMt1Oa2eHlT2npDfjmH8SuO0=\r\n=1EpA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230411151359-929de326-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/dbfe0ba37e32aaa179562a66c1c89768/blocksuite-virgo-0.0.0-20230411151359-929de326-nightly.tgz","_integrity":"sha512-DbNdJPgmi/OI40k+qU8A1wUeNIU1G6K3NXcfk55UEA0q4bpgm0MTbMGAV8GPflhM7Oy5QbtsadOZIHN3IZ2CKA==","_npmVersion":"9.5.0","description":"A micro editor.","directories":{},"_nodeVersion":"18.15.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230411151359-929de326-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230411151359-929de326-nightly_1681259077692_0.8558630439190846","host":"s3://npm-registry-packages"}},"0.0.0-20230412041719-76e5b5b9-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230412041719-76e5b5b9-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230412041719-76e5b5b9-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"b2b5e0825e48111e93c69faf7d09d65d81ac37f1","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230412041719-76e5b5b9-nightly.tgz","fileCount":152,"integrity":"sha512-FEq5dTj0rlODA7iPHchG4Nrerl287livE0jWmTRpEFBfJ6iWwI0jKWbeYo/Z9zAP55lTqSI8MjHXQOYkgw/QIQ==","signatures":[{"sig":"MEUCIAxveLcfiZHLLyN3sXFP9YqVlKtacBSq3ElIgDRc3Q4zAiEAlo11tlbBLEBoGrmsF/Z/1b6nJvE1YiIm7lPyfgDEsVs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNjqJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoaig/5AZaZ4iVoGmMzSz+NI1izb7ypTYUn6QxW9AWaZ4NmE4Fd8nMM\r\nP7HbW3hCJUnG7iSMRoo7C4EK34oLXdNAo4FW0nIw3I6urqPmY0Fla7McqqBO\r\nMAJA1s8zZxKgKhJK5jK8HmOuT1Jmi9AsFcANmnpgZ7XZiqRZWUnCRDy3wBRt\r\nDcA49LbygMCvk7Yd+Mi2JKKoeis1Fe99HYzm8jIizWdtcRzsVJtTmRfgIL9c\r\nd2Djmc/yvMWFs5g0v83f7UZd7R3/WSkXx8uktGDqdWr66WcJPK6uw0RWtZiT\r\nDj7VfwbnfraHotHEo2dhqird6+JY+RD2mTlYHDmaF3n1XrSP/iJ9Nci1hJZE\r\ngUG3oYZsIg+W1VEiBUufiP4me3hgsDY/XT8M267h5Anz+5ciNNczJmbGtCLK\r\nST0GZaaSCX/AgSdxpvkwNBMkHKjeT2WXm0S71sg/2rCPjpqCM3CcgWzZAlio\r\np3+GvGP8n8rYVUfnqSKmlq9yxlQKPdzD2+CuY78RvP0umOK97Tst3EAbctVv\r\nExWo66U+RZV8ZJ5stM4TxgNAxU11ilk0fkRDraAA83KeZRxijzZTVu3fvpnN\r\ny2ftX96zV+oFyAx3Sm9M5jzbezDemtOHoLf0cfflZL9CYTvZ+z+XldlDiqYv\r\nyM4XVwrEgfXTQGmq7K+1rkVYrD/PZ5Tkojg=\r\n=NSnD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230412041719-76e5b5b9-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/b47591d6aadd045406975d89e9f346a4/blocksuite-virgo-0.0.0-20230412041719-76e5b5b9-nightly.tgz","_integrity":"sha512-FEq5dTj0rlODA7iPHchG4Nrerl287livE0jWmTRpEFBfJ6iWwI0jKWbeYo/Z9zAP55lTqSI8MjHXQOYkgw/QIQ==","_npmVersion":"9.5.0","description":"A micro editor.","directories":{},"_nodeVersion":"18.15.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230412041719-76e5b5b9-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230412041719-76e5b5b9-nightly_1681275529339_0.740968937044983","host":"s3://npm-registry-packages"}},"0.0.0-20230412114309-05fc8eec-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230412114309-05fc8eec-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230412114309-05fc8eec-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"04dd5dd2074259caeb9edfae9c945e09e417db1b","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230412114309-05fc8eec-nightly.tgz","fileCount":152,"integrity":"sha512-smYyUNFQdnsuBQH6YyRZsTDIWmgn5bUq6Ni73GJ1kiYd5hJIgKWPNKJcHKmksf0+el3azZ2a7g/YQZDS+volZQ==","signatures":[{"sig":"MEUCIHu07u7gMkH/i9PG8KtZbjz0uINdmlnfNwsxjtJrpmYcAiEAnHHW9yQM8aT5gFO4EXuNPJERmcFtIWy5Rq8E3xCqsKI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkN0taACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqnfA//aqusAX0RBw0V3Cg2/DIlCT0zPwxn8GKtPIqviaULQwiA6poW\r\n07P+D09+cW9wp+wr339jBhfvHhMlIF7QyLfDaTcGw9ycOJ9S3S6Zr4FQvD2v\r\n1BnBS5WHzUpwJJuetcNr2cexS3l2rsoJvGjpsbUnH/u4nOr8vhHEBtEqNY8X\r\nRl0xnyVxgyBQEUzUofBzDtbFsDPf7wE8kNCD7bV3jfWVRbERiGjxVkvXM9cs\r\nOVVR3yDhcHp3WpZZQrnBYIPXd/wJGEMPt8p/visYoo6wLPWq3lNKaNgHjlf+\r\nF35Uxzzm88IPT6wTPiJZK3qLtDV4QBLpDfpSgv3UyZdMp8lWMni/tqvl36lE\r\ndcxMIXp84ZDYK0/1tyTuvCyMp888J8kIuonhusP4BYIfuOKqbaHzryIXBa12\r\nAVVunPZiy3kqnVTGCiGTQqLTNGwo5N2Iu57k9Yc73EaA/4mtjNhkTPV8Zu/S\r\nSwcejk3E2eBA0pPXttQbWHW7gijkvm4mF2hIOqdCH6vRwALvQlWbs2NQm9LG\r\nt3Zt3LXY7snAs2YKVUln/KrDx1wwCre+pQ0c5pZ6PdsIxbfS8fnO4XQJdW2S\r\nVGmo+wk++prKpzQ7pfUPBNO9TIXc2d1oGGV/s5BTYbEiqO9PonuWN8P1iFCR\r\nW6qxlyrZwi6BODWFbhQmEHcVxlfIudkg2+M=\r\n=7t6/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230412114309-05fc8eec-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/1a76bb6bd5cb035183788c05ba6a3b4f/blocksuite-virgo-0.0.0-20230412114309-05fc8eec-nightly.tgz","_integrity":"sha512-smYyUNFQdnsuBQH6YyRZsTDIWmgn5bUq6Ni73GJ1kiYd5hJIgKWPNKJcHKmksf0+el3azZ2a7g/YQZDS+volZQ==","_npmVersion":"9.5.0","description":"A micro editor.","directories":{},"_nodeVersion":"18.15.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230412114309-05fc8eec-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230412114309-05fc8eec-nightly_1681345370147_0.6415187154107349","host":"s3://npm-registry-packages"}},"0.0.0-20230413112150-e058f87e-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230413112150-e058f87e-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230413112150-e058f87e-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"2dc796b340aec5a219800167d585c0d8f87f1e46","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230413112150-e058f87e-nightly.tgz","fileCount":152,"integrity":"sha512-qIssDMh7v7Z9ujbXiBpUCulgDwV9cfAxEO4BTgf1eb5026YoiiO3xS8MmKu47TlNLo74FnUNkClzTrYpfEcU8A==","signatures":[{"sig":"MEUCIBbLPKfF3TPIYlvfd3HONcLRi1mzlpzwuW2Co32EYai9AiEAz2XG5+SIflqTxarhl7SRuvFZZpZlDT+RiTBvSLlO8s0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":461102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkOAZzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4Iw//Wa6yCi06YakjwjhvuIWJ45dqdxqhJTrZxjrQ3k/8OK2GOgsG\r\nVFSlAn6wEbibbwGfRT9b+6km4csyaAn9gxipwezulVADy3EqFF8iBS/6idmr\r\nfaNgyXwRO2ZfH8ROLG1ecSsGtSqlNwW/jGr/ybF5yp4YOqgfcUgLGqF9Mn6J\r\nfpjLxKqlg2YYG6gvkzif8e9oyx2eWo1VJx2PT4wLXhitxIx0wLOE7KsXFi46\r\njYx9EK2J2GexHyS33N0Prgw7Sp1sMu8VkBpuxChbIMFs/iFmihDx4OYeWTbg\r\nru/T5Vc7QxoLqN36uUrNNJNuKkJIeYygnQiXKEVC3grcycUcXh1w3SDK7Xn+\r\n77hfQdhCFHfSzdGjqy3SpybWNE+SxU2v95GO/73/JaxKdqEiJFJMwGb5uhFY\r\n4FC7Aqa7rVEdyrg7mRNSZt9j1DVoPrNui8FK2k8Mu7hZCg+yUNQa2Clv9GYM\r\nuz+m6qDFcHBqwvolRi0/7mbx2a7oG4Mgc3t/2XHulTpRY6McHbal2DD2Nns7\r\nKCO0yJBAFMJL+rze2YXQNBArnsTXQZdnoA3pNZ3qFB3v8DJZCR6QeELhyBNs\r\n4U4pJGL5vdHXwoqirPee95fIhFg1WRjm7eY+Xa/GbDOKOqgFLqz3bfoJs5Wq\r\nL/ibazIbBzZiJ3cZhfJK+zq4T3VwWTdSTJU=\r\n=mNlw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230413112150-e058f87e-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/ebe58e1d3bc2972c17f0ff1945615fe7/blocksuite-virgo-0.0.0-20230413112150-e058f87e-nightly.tgz","_integrity":"sha512-qIssDMh7v7Z9ujbXiBpUCulgDwV9cfAxEO4BTgf1eb5026YoiiO3xS8MmKu47TlNLo74FnUNkClzTrYpfEcU8A==","_npmVersion":"9.5.0","description":"A micro editor.","directories":{},"_nodeVersion":"18.15.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230413112150-e058f87e-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230413112150-e058f87e-nightly_1681393267064_0.23712742223659466","host":"s3://npm-registry-packages"}},"0.0.0-20230413190748-4d32b79a-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230413190748-4d32b79a-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230413190748-4d32b79a-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"230f4dfce1837eed5f913675f80af75f53b5059f","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230413190748-4d32b79a-nightly.tgz","fileCount":152,"integrity":"sha512-FRRwjhHUosSw21IOQ+Pb0afjunpgNAtjBflGCJYoZiOUek4M5neWQEibMeiH0RrDfxVgZ/qFFcxKsVjkcMr2qQ==","signatures":[{"sig":"MEQCIEMBe915oiCSsomPg8abNYKLsuLoM0K9e49RViGsGNYxAiBo4IRQdWyKUf/zUQirPO77LaGmNKK80eqC0gnznfnz/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":461729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkOJzvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrEdA/+OhzhLU4ffDiIadgTzfLtvNvVBtuCc2Q1TEhUfQoU9xk0TV6A\r\nXZcfjpt1i1hdpmKKUAiRfXURb5VFJc4u2DnVGRY75srnMn4uG4O0PHHN/h6M\r\nFfUC0c2jHZ3hyXy7ld/T2TDqhg0w3HjxVh68zKNEmwrEvLzdCb/n4vMWDIeH\r\nNsl/sV60yhoFoJYY2+kz1HNSva6wlym7x4pJgUyWrAY8RbFk4j1SBhAfyCU7\r\nw25GEYrdSmw6ETQzG91Wo/jiFCi7r7DejX1T9Z5NRkgRznfebQJOBpoLIQzn\r\n/uTXy4JbdaFNgS3+8dNG+lobieArKoYCh8mEx4oZwDIqSb8c3rg1KZ1GhxE/\r\npIqrePl1xZiKvYmdkBiS53Y1oyQ+9zEwx0BZXc4zIxuGBU1ZBETmDrlkRqSQ\r\ng7i6I1UbFy+Oujznz/+QDmgbJcQnT90PIU5qdT4v7I+im6aSBGXkPv0/4fIn\r\nibwZ8nkvI4K3osbcrpMKYKco7nE5pte3q/dP7Hbj6/g2059R5uMxWDZ/GgTK\r\nBA0vOxltrU/E9N0zzoXDCIW78v11IqqDqkjWFcqppEw/k3eRjJhU7nvc2sYV\r\nnOJtOMqB8JAGlKCiGCASXfL9ETQ3g9skkCAkUrDrgtb1d5AQClTdIBu7PIRj\r\nOLBIsGbEAi9RgJWKAx3F1WwPIlXKA2d6EZA=\r\n=Xsoa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230413190748-4d32b79a-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/f895a6d26fa6dc51414040f5d954c88d/blocksuite-virgo-0.0.0-20230413190748-4d32b79a-nightly.tgz","_integrity":"sha512-FRRwjhHUosSw21IOQ+Pb0afjunpgNAtjBflGCJYoZiOUek4M5neWQEibMeiH0RrDfxVgZ/qFFcxKsVjkcMr2qQ==","_npmVersion":"9.5.0","description":"A micro editor.","directories":{},"_nodeVersion":"18.15.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230413190748-4d32b79a-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230413190748-4d32b79a-nightly_1681431791626_0.4168204092751029","host":"s3://npm-registry-packages"}},"0.0.0-20230414143749-f98f3e94-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230414143749-f98f3e94-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230414143749-f98f3e94-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"c89526890dd7f229226f91633955a90d37595026","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230414143749-f98f3e94-nightly.tgz","fileCount":152,"integrity":"sha512-cxw26xNIvURBkUnCCcaVdreuz3hNvUM/Gl4GsY7eJ3QvZR1g5wGz+8Fz9bx/Jv/Z2n0Zbx/UD7ANRzv61EkDIQ==","signatures":[{"sig":"MEYCIQDb+bt4L4GpbMNrc+q8q/hIMOQZu9oQtxg5HyGIuzx6qwIhAPxY052gicz5ywu/Y/KdUZYWntV6xN3wxfqFMF7kFmt9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":461573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkOe8mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqgZA/+LH3hZzLMeJhcFf3T7GUJRFlVG+LIDyfGxtQcJdmi2n4KvP9O\r\nuD1zWNh87QsguBSr+gEgNZVhOJL0qFJoTFdlwHMwJw3WiChWyXFa7vZ8OAd+\r\n4JdEy+glrzwbrVfKP5q19FwasFjXkHfcFrshLLYTg+xAKmpGvWFJa/coxz5U\r\nfE0QqJRfLG+Sz0zFV1ukD2WYfy0yUJSQwp2+VPJq7kIllcCIj9guSKLSyl1G\r\nS47cNnoguw5XC3Dr91ttcDu9/WIG6HgTMjtZLan+KBwRTgNIP7Zn8zMy0qSC\r\n1FidbBWViRVAc3K3afZ6lsbwKRlLN3DOBiqbnUXAUUd4c6Xhun9zTVPM15N0\r\n6hqcMsnO5PK/13R08Z44LIAgDCmX395e00EsxACVifMdqajfgWG3WQ8GmO/H\r\nlHeIPuwsO2/nzKc2V3rbkCUk8+MrDs2WA/ujK3zqLkFj/qB80Kkb+kRSKJRK\r\nVTNYwyt5rDEpS+HoTX/2BG9QsMUxNEZkrZTucro6YOpKJUo8uu183Bq6FyGC\r\n2nOZSOh4CP7UnC5xN+eNRUu4voqPyZglm8O2Nomp3csHU/5foM0Gy2OdtHvY\r\n+c03sg3bWYGZI08sosIu5+SfeH1rCwUSgVKrwOfRx2MlFplWFu+Q1kI85eDu\r\nvzuKR7jJb5n08eJIncntffbngi0Ht2nfZaE=\r\n=z7Bg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230414143749-f98f3e94-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/cb9b67c8d6d87f9d79cdccbff5742c1e/blocksuite-virgo-0.0.0-20230414143749-f98f3e94-nightly.tgz","_integrity":"sha512-cxw26xNIvURBkUnCCcaVdreuz3hNvUM/Gl4GsY7eJ3QvZR1g5wGz+8Fz9bx/Jv/Z2n0Zbx/UD7ANRzv61EkDIQ==","_npmVersion":"9.5.0","description":"A micro editor.","directories":{},"_nodeVersion":"18.15.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230414143749-f98f3e94-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230414143749-f98f3e94-nightly_1681518373682_0.4839755469632183","host":"s3://npm-registry-packages"}},"0.0.0-20230416000648-f322ab85-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230416000648-f322ab85-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230416000648-f322ab85-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"4613b34b38309fe4834fbeee52e0f9f298b1e9f4","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230416000648-f322ab85-nightly.tgz","fileCount":152,"integrity":"sha512-X3BsGNJEgL59gUwKJcbdcwcqZvi9dkU7ZWdF39n9PVjXUtEYT8c1WeGdPjYiiDFR+qV27p4R4nU+S5bMgQucZw==","signatures":[{"sig":"MEUCIQDQ8ZqGLLcdAlB05VPyYKhr+qlHRR1hVsy7iz7qLwEb7wIgC/oaSnGq3Phbj4SeMdAWBsYHCfgbKbpzD/QYQa4RkCk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":461745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkO0CEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3/g/+IRd8JbuGgMHBHFoM0aDfEVyI1sdQ7uQSZ9sw55rjWUl/yw4I\r\njphM4OhSvnCtxNI2hchHMpy1O9uc51ZzkksHXRqxUI+KudJndY9Let0PpxWu\r\n/pQo8ozd2SXu43p9fmLNkuIypbOUCKPByiI4LkCA9Yw7XjFU1/YpoxRkTSQp\r\ndn0n4N0YPrqYPXYDsGmjiaivlJTv2Q9UbTvoHMvrB9hI5yYaQoxUQfiKv5AO\r\nQNO99T9E1Cd4KAgIRRY+3rKdKqUsBHJctUkNeu7sKRnO6sehGP38uq6TDpRN\r\nXp85NQm+6ZTOnX2TrmTyrnfNlZQgnWHErfNg4NqLjSuPJMUECkgEm8kR0ppy\r\nruzWTlL4ACr0LbpEWsHRUNt8mTTpgt4LsDVSvdsQuX1X/2Yng4FyxmHPvZi4\r\ngAquzRaIIoUSHJ+pMAUlygHa/JH2/aRK5rIwW832uhUsx4Wpngrg13kq8O50\r\nkynfKa9CViN+pgm1Qv9o4bX9BquYfq9R2lUJZ09bpkmF56HnBqNKoRH1C/H2\r\n/4DBOzWVPBBcjQgW/ouyR0xXB5PFrU2Q48g/3d9XOoqOPT4hPhXdlxbUDoo7\r\nT9An8JjCmu01l+5Szwzzv3QCnkmTvi+uZvSO92HYc/pzJHl7kzDLV3KWOB0Q\r\nHSQy32yI4qgr9b29eo8lATNJw5XPY0bOPnw=\r\n=45PL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230416000648-f322ab85-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/0e2c43cbb96fb7e71e8b3ea5dc83b3ad/blocksuite-virgo-0.0.0-20230416000648-f322ab85-nightly.tgz","_integrity":"sha512-X3BsGNJEgL59gUwKJcbdcwcqZvi9dkU7ZWdF39n9PVjXUtEYT8c1WeGdPjYiiDFR+qV27p4R4nU+S5bMgQucZw==","_npmVersion":"9.5.0","description":"A micro editor.","directories":{},"_nodeVersion":"18.15.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230416000648-f322ab85-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230416000648-f322ab85-nightly_1681604740197_0.5899862510382996","host":"s3://npm-registry-packages"}},"0.0.0-20230416194015-c6ae6f0f-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230416194015-c6ae6f0f-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230416194015-c6ae6f0f-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"df72d6fc4cb5a411c0f7d5fc1e286fc765379a5a","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230416194015-c6ae6f0f-nightly.tgz","fileCount":152,"integrity":"sha512-X8AX3NMk3wWpLT0XpBKQHJ5qAGhj/Z8mFUblLhh7+IKo7Y2o6+wUBaYzECxlSa6FA/RLUW/fSK7+T4Yey/gayQ==","signatures":[{"sig":"MEYCIQD2akWG87k8t1sUBNRdvIUZDW/BFRZWvwExzlBL8udPTgIhALGWpBKkInq9XbzfjbEqOhuIbZTIaUriop6BophWJjt4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":462046,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPJGlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmotPw//Wtk6gcHr2DgMhmpkiSVfn3thHPSNNshNdDtQHA6NDuXHe3DW\r\nwtLh9Umyoa9gbVjIx28mfIJyDwxrC3GlsX0alBLZgWYDdA3IgYzRiWvV/q8I\r\nGQvlpX1t8ny8Lsx675qQfpUv5+DRyz/01oEnv4G3EKmJtcJVDggEoaOCAKOC\r\n81tQmZlxZvn0TFXQteFdWN3VYkZJP1ygpMx0IKjaIi4xX4mh70L6pgorVUCx\r\nzhSQhSzkCeL+XPySNtC5U9o7N0mMS8uWMaVXaleMJ0KlxOJ3AEqHcqU9CtVP\r\n+5xoIb6Yta/AK4j5Dl19o0G0xARDUE9bgQrXwPODB10leZWWVM4LFwuFyWM7\r\neDuTmQ3wF79wFxPmFsI0oLYFSGNLOw0Xgip8+S4cIa63Vzl59uIoZky/PCX2\r\nAydFyB+iiVJXKrdUcFiT1G2cg2iG9Z8It9Rkok8KL7Pa6pu2rwVNAatcKwKo\r\n0aaUwFqHpdZitLrGLcWPhpVVKIW5/jIWsx6FdTS1CwsVyy8/BgVmRaTcsKuT\r\nhVZ/R3oFC3G1lYe88ld8PHOlkLjQMnaKFfDF7d07z1y6UAic7DEgfI0lX7g7\r\n+lO8jQ2resNCPTYLVIhlUpMDx90pW/Q50ZswMgh6ThiWeCfYPs+6DLgf4OLL\r\n1RS1AlyTXhJ7GrlWMWglAzrFhbTlpujdkKg=\r\n=Yl8Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230416194015-c6ae6f0f-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/32613eda85e76f64169c85e811cfc5a1/blocksuite-virgo-0.0.0-20230416194015-c6ae6f0f-nightly.tgz","_integrity":"sha512-X8AX3NMk3wWpLT0XpBKQHJ5qAGhj/Z8mFUblLhh7+IKo7Y2o6+wUBaYzECxlSa6FA/RLUW/fSK7+T4Yey/gayQ==","_npmVersion":"9.5.0","description":"A micro editor.","directories":{},"_nodeVersion":"18.15.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230416194015-c6ae6f0f-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230416194015-c6ae6f0f-nightly_1681691044907_0.3256839130464604","host":"s3://npm-registry-packages"}},"0.0.0-20230417100332-c673f663-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230417100332-c673f663-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230417100332-c673f663-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"c095ba6a8f811e1803d88c9c28550f92dd04f5c5","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230417100332-c673f663-nightly.tgz","fileCount":152,"integrity":"sha512-/M75URJk7fx40W5DetGYz6tDUzOadOZPVQGtGdm2uBydFvAbveo5znP7ZR/2290PEB3qceTWe2MfRwbCXa5W8Q==","signatures":[{"sig":"MEYCIQDlpupRl0DjrLd010L/dyeFyaQSft5vnsvj+XiBsRgZOQIhAIuEve2qyp4Znlp5BwDc17GD63peK5cC+tqrKpVpIiya","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":469209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPeMOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMwA//XdAYAEkQijqyVNd1RDawxFIgTGzIwNBqJ1G8pulmo+gUUIWX\r\nn4fhiA23TQtJAlZKfjEhvLqfBVk6qbUSGOZs6QcxTkCbOpdJ8nH9qDVbEPRU\r\nkYKvD6z9Bzhtgj+jOhs3GG6nkA0o655aHvJFMNBnWF/3srh8xMrYi2WmlS3b\r\nlB6NbU21Rin8iSCIohiraH/D0XiexFJ3Q3/4hvRtYjUykwUH3w48jXLEyAE+\r\nDWhCM3TciC03ahXWP0iz0HymjR+lq8fX1MSK27/QzbgyTlrKkmPTaEzMC5Zm\r\ni5BSovDYY8fg6uY8EW4zfor6YbWIvy0P5564LxNIGULYLib/+3kirGJX/+ue\r\n/YlYdcNq/3L3R8WZ+f5TIVcPRId+zdckcXWpTJW+s1702gq3Pyf8Kn7s+7RH\r\nlu10X53eyyJXF8NLmAXQnBGKoyndJuVbdA6Y7MQlORjEk86HgJPYkdutS82h\r\nt/PzoKzoNj4Wn9a2jBJ3V9a2s7c3cKrWx2Z4tMq/n2UhTYom/QrRk0eIOYeL\r\nFW8ErIQcaqOzM34O7sQs1uF7OSGBTNspfRgxswE/7ISz2y5Sz14ZD2YlUV+1\r\nL/ms4kCIhtps/jHqsxiJdnpzh5M8HrF36QV8/ppmHOZ42KTZO8GqU7kXiRd4\r\nJNGq4bxzmHqMnYcTsR5BLCURsoBVBPjPuBg=\r\n=/FdR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230417100332-c673f663-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/118fe9de1df37a79abab18c55b666a4c/blocksuite-virgo-0.0.0-20230417100332-c673f663-nightly.tgz","_integrity":"sha512-/M75URJk7fx40W5DetGYz6tDUzOadOZPVQGtGdm2uBydFvAbveo5znP7ZR/2290PEB3qceTWe2MfRwbCXa5W8Q==","_npmVersion":"9.5.0","description":"A micro editor.","directories":{},"_nodeVersion":"18.15.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230417100332-c673f663-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230417100332-c673f663-nightly_1681777422160_0.3244965903514503","host":"s3://npm-registry-packages"}},"0.0.0-20230418192708-038c287a-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230418192708-038c287a-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230418192708-038c287a-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"1710dc8f346dbebc07b16ae23ccf74016c0465c4","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230418192708-038c287a-nightly.tgz","fileCount":152,"integrity":"sha512-ryKuC2bGoytZzEQSj3aO9b9U+QGG3XLbjWfyGBnEFr2FB74dNxSGv80amwHR8ccz1Hi3al8T2LGqRnyAIA5hIw==","signatures":[{"sig":"MEYCIQCoM7oZdtYEWhQrZhwI6wxEbYpd2c2zQhBWoVN9brFu6AIhAM2wndP/0eb6RES657A9yozQR41zAT+SD3OHH97PhzW2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":469604,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPzUBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpyPQ/+Okezwipx/hgh/KuSTMgCZhChXcOg9ATRuKTdM1SkXLyQRRrI\r\njZYnWyp10RHykKMp0SzDi+3E5E/P1GsmjQ/Ypyd6zwKdPDYD1lH+rDtxeuLb\r\nSBg5WZumRxlIoHB32ZecZdf4U2BxR5PoPCEoxVszentTXPxBX04Ms+iLKd0H\r\nVWaSWZ0s+XcTddhHGtmQ8jmHEP3ruFnQdHwmP4eH4gKOjxoxU8sXAXQMs5EA\r\n5MGH/QAAuMHOtczOIsQKIa6MRPwKkWkDlm2Q1N7tWN+AhXTlLshEunagYbRg\r\n8JEWiT60zT7gXcVetlWL9+w+JSu7vC4p6erRZvO0j1EE1c0aSNNrtOlwCTML\r\ndJoeKn4197QMOrC2aqAC6q9Yfq2+HDAp64h2Chq1eVDDqgfV4mmNq5wfs8KQ\r\nUmaUnc9b7TMwLs7mM+pxhs8DpJVTx/3qGKP00Q5QlV4n5NwU4fQU/UMtstxb\r\nsQqU0v+bbJdv0K4hbQMov9SlxO9bsw1olg3sMitP8ADOTDqMFmuBjbgWPdvQ\r\nKfT6uFEB9izb0xYIoB7q1C2sZXeMJPXUJ2F6XbSO6zUNYL2g5WfVkS7trKj7\r\nY9sGS2xpzuFP82W7JBeCwp7bHZaylQRAHWGMHkn11DdQ3IH/GOtXVP/iCkSa\r\nKXoOo3IBBMVAFGhTaM3c8Kc3T0NoGQiZalc=\r\n=3KEZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230418192708-038c287a-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/277c4cab6ac9510908995bd38154b04d/blocksuite-virgo-0.0.0-20230418192708-038c287a-nightly.tgz","_integrity":"sha512-ryKuC2bGoytZzEQSj3aO9b9U+QGG3XLbjWfyGBnEFr2FB74dNxSGv80amwHR8ccz1Hi3al8T2LGqRnyAIA5hIw==","_npmVersion":"9.5.0","description":"A micro editor.","directories":{},"_nodeVersion":"18.15.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230418192708-038c287a-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230418192708-038c287a-nightly_1681863937170_0.2526959267138835","host":"s3://npm-registry-packages"}},"0.0.0-20230419181152-90833057-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230419181152-90833057-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230419181152-90833057-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"59d63f35dddd7b68d4a5e450058c819ce4c0d29f","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230419181152-90833057-nightly.tgz","fileCount":152,"integrity":"sha512-ZsM4krP7/e166ShYvZlnizWDZ9pcA6Kqxe3CT6Q9Lriu28dMz3cctdewJ8CvymoTgRkHlAv42Jg0pqHa60dcxg==","signatures":[{"sig":"MEUCIGnxq3JDuLSPMeFe3OHgMiz7bVpuA/71xIy6GqNbmPS3AiEAhdjDjDaRGBvQeWUGYMD7TdcHDOFbxpm4vB4znxvAJEM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":467246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQC/yACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8zw//XIZBt4ggOhfsqMarvkWGgAetRnMlf1skppucHaqmULE6eHFa\r\nBxXGBfZEU9T+3nT2jTG9UAkVOXd0laj92KaKdbx7awNMkI0dtTu+P7ok2ZOf\r\n0VlSvRCdjnJDj5m806WSpCNx4+jGKxWnej5B14dla6TN6GWeZ+9Dl25G02xl\r\ngKyPicJn/TiqOWsSG2AT5cdYfGKp7czjq8T8Dyw2iulCcLXBOThlFYl0XazV\r\nFZsCDpUq5EWwNU/xvAolh3lj/O2OfG0+jah1e6FI8Q60IR4eFbJcClVHU8Wv\r\nrl9S6ZkD6PuoARXY7QRbHQPUdLawEnBtXIXVkLslZNfQbdHEbJ7xRQUq8z/8\r\nL1Nsi9UneQ0qY6uedhV9AlHD/4dYNIesJl4ATCkxocN9epvyfi0xpU6yAL6k\r\nakqJtqPmaXpsD74Rdg9t76fKII/JwywPfjRhj6sPyqYmPVw/GsnGLbJLB+NO\r\nKDatZYcYe9I+ASA6KkBwOOzXxTBdgrq8EQH3CJIoAsQreBFWBfiCNG3y+Cwt\r\nnOozxykzhj3t3WIa3QvxcBbyH5Z6fEUxB7sH+COsIMqZM2l3s45Fovwh70Yi\r\nDWQYJ2pvpBRqcOe6Z6mKHZOKcnXKsE5NyZoWLv7xwyN2n0cgXdnmMDAh5ydw\r\nyWK1H2kTEhI/7nOEhkX4NU53lnM/f1HdyRg=\r\n=wOj+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230419181152-90833057-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/b64b65b6db5cb6adb89e3824def73c32/blocksuite-virgo-0.0.0-20230419181152-90833057-nightly.tgz","_integrity":"sha512-ZsM4krP7/e166ShYvZlnizWDZ9pcA6Kqxe3CT6Q9Lriu28dMz3cctdewJ8CvymoTgRkHlAv42Jg0pqHa60dcxg==","_npmVersion":"9.5.0","description":"A micro editor.","directories":{},"_nodeVersion":"18.15.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230419181152-90833057-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230419181152-90833057-nightly_1681928178504_0.27873022942700465","host":"s3://npm-registry-packages"}},"0.0.0-20230419181455-be5e9007-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230419181455-be5e9007-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230419181455-be5e9007-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"7715873936c926fcd549e24c4c0bfbf1fa408ec7","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230419181455-be5e9007-nightly.tgz","fileCount":152,"integrity":"sha512-jfj1kSx014NPA1HbDFlYDPWysaH04PVbnyRBlCO4rDZN/+WbWRe4d8c6W3bQVqumpgzzST1DabUaJpJl5KsSdQ==","signatures":[{"sig":"MEYCIQCu1rjFnw5YNgJ6G6oubAXDB3C6iuElKU1XO0Avfum+aAIhAO5wqbkiuhamnQPq+tXWNKTbyglt8zb4nGuw2VvLgno6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":467246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQDBuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqK9g/+LMqtVofsASf9Y56SBvEA+ssc9ipYugwj0jJS2kcPYxUlPhq5\r\n4BjKMejkZM4TpqtoldWahrVdLj7RTCO/IQme/KMjgZIlGvRBDvRrFgj6t/Kx\r\nC42V5c/aidGjM6y8O201YqMufN8mMe2oyKReZs5Skkiup6S9+gaUpYSLS+VR\r\nA1PvTRNM8Oy+A/l3b+Tfxl94FjO3aMc+/wWniu3Jq1RgVGkZcwFAsZRq0L2+\r\ncxULMrWZ2s3LUvhavUMcKrp3F15DPQ57nI25D2zCPZKvWHeoOdiTlsfFLctA\r\nKWnXLlsFaZBpBcY2ObPbqmdEcYTpA1Hw89i0FP/j+ft4Pg+HzbMWptb2X4Sv\r\nHty4VhVYB2k9/Ym2RHsm/v7LYFW0grnTR6sEtm9MnWa9oH+zkrZEh3zRFg5i\r\nMGUJEnJqfjT+31tep0idgC7bzqYesly95RODfaSkbkwaBGK+ZBElFgj83xgy\r\n4LIvJwPDGUEABXZRJUESoErs20kN9VqG0t+1H7WWR2zYFK0/SC8+2PowIctH\r\n7EWU45fFXdPvxigw9vyjQ6D+etp3H5D4dXz3x2CqJy2v6EtaFWvv4IyvaaYS\r\nUBqMeUpjlJIXvFiPWa7EsEwfOsWpzqAJzKZ+bTkHwII22MwnPEMEIi/bvvuH\r\nux15TOPX4neIPbruxApv0MSjTKJ6v8qsIfc=\r\n=LJYQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230419181455-be5e9007-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/639b6337714805d02c17db73c8369b1a/blocksuite-virgo-0.0.0-20230419181455-be5e9007-nightly.tgz","_integrity":"sha512-jfj1kSx014NPA1HbDFlYDPWysaH04PVbnyRBlCO4rDZN/+WbWRe4d8c6W3bQVqumpgzzST1DabUaJpJl5KsSdQ==","_npmVersion":"9.5.0","description":"A micro editor.","directories":{},"_nodeVersion":"18.15.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230419181455-be5e9007-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230419181455-be5e9007-nightly_1681928302376_0.7549475931578897","host":"s3://npm-registry-packages"}},"0.0.0-20230419082004-ba4cb881-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230419082004-ba4cb881-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230419082004-ba4cb881-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"6175b1215a44c7da41d096157f747b0484a0c261","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230419082004-ba4cb881-nightly.tgz","fileCount":152,"integrity":"sha512-DNnfVvQZni2V0bMhE5yoFlzxPNwQ2MVTXjJlMCXdm46fm2thr/CwIIU5Ra7i8mc8DDv4LTlG5oj3T4jDDwM+/g==","signatures":[{"sig":"MEYCIQDV2c/KbyvpmG8+i3BZC2TylkVzdTJfFfYITTDStmAUWwIhAObDvyY3rLrYvVLxNdFiPhYFYdmHu5HxDKYwVUMRkwOA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":470012,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQIYoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmofsg//f8KH+DEc6jMb58/fJlXnxiSv13mwe6tBHlsPdiy2JP0JW6wb\r\niZpTsQOyY4W0M/imyVkgOlkaAHEQvkpuXjJ9q4TUqqZ0QtyiG/g1SBmv+wU5\r\nQ8RoSVXYOXNIa7akz5eXiSWtIuhteh403WzZYzf2UBOrOGvCda8RpOGaJs47\r\nxwUldjiPR9AB1Vyndjr/qxZFBUWYmTkilHCurJFgXsrzoh3xCSwQGX09Ybsn\r\nWlJ2QKEmo8xJshpHcjreK+Wp95EV/2T1ElvBsw8ZCDvqp0JHxpzBOZk/KcqF\r\n6Z0xKsp5L7rKIzVVnk+PXwCE2cb2EV2FmSP6jHUZWEIEgOFz1UjOCrl5xNt9\r\nGuddsrui4PRvq8zBOqaD3sbObCxoZTMLZIbvovFo2kUW5OhaDxvfQun1WbR7\r\nuPUpK8e69Lm5bHmI4z1LFJZKVnhxcugr/9gCN1rv+I3UPe5dpTHKQ0+u85EH\r\n9/hTp0ukhkRtdL1CoZa169hfnFTMK1WzRK4h0Y0xKPMi8dNoQxksiwBlsWYl\r\nl4lSBWd/j4MV8/NDuSwb1UbezHqo0UfqAOgGjVF5h23/NsEadBzN7cTOinCw\r\nFWaX6gMqfInrAusS95tgmhfdgtT7Gj1HCTdqJK/aTaQ25d8crByZKO1ghm7X\r\nG2iIAqFyq2DlPlEZnMAw3KkqGV3zwu152yI=\r\n=5cGZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230419082004-ba4cb881-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/109165619dc08efa28a2d230bf8797e4/blocksuite-virgo-0.0.0-20230419082004-ba4cb881-nightly.tgz","_integrity":"sha512-DNnfVvQZni2V0bMhE5yoFlzxPNwQ2MVTXjJlMCXdm46fm2thr/CwIIU5Ra7i8mc8DDv4LTlG5oj3T4jDDwM+/g==","_npmVersion":"9.5.0","description":"A micro editor.","directories":{},"_nodeVersion":"18.15.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230419082004-ba4cb881-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230419082004-ba4cb881-nightly_1681950248430_0.359874082370218","host":"s3://npm-registry-packages"}},"0.0.0-20230419224531-580687ea-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230419224531-580687ea-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230419224531-580687ea-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"9940676fbc1d23ad1f291508420bb3dd642b786b","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230419224531-580687ea-nightly.tgz","fileCount":152,"integrity":"sha512-+v1QbkuD+sX0x03+kX9i1934J2L3vr+fBnS4+TY9YK3B6mH08F9DUSCkOaEeDKVoIEGQbnUmXA//zzX09ibA1Q==","signatures":[{"sig":"MEYCIQD/cHHNhNJjU0uIv39aKsG86FdPYvSaiRJM0WAo/iae3AIhAPGG4JiLuvElDAxMxH12o4Dc5Ugl3A9HfodVE+vWyVY3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":467250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQJ3gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqq9w/+Ib5iiPw8GCl7FMFQujMicyzFqzUc78bz98uxgLcgslFFX/lE\r\nOWb5fHiqkkiLdSs4CuU985kPBf3qAlDlZzyR+uWLMvXgli0o7Exl1OXxbZIt\r\n+QGCnJWFGjBqsyrCcJp/oGhQb02uw7il9OKH5OpMwWnTyf5xP0oCquhIRjvz\r\nIDmOMEaAwTNFpPZrzbGznnLcV22emeMWlX3Ndtm7ak2I0tUrxmz1o3VIxuED\r\nm32lIncFxZdOTZOzBJCZVRchnKhQUBSSnNpFDeXSUmWxkAJ4aicBwL2YmwE7\r\nspkRvTO+juMjmYVFRb5qR6dX6smJLTULy/MKXaTaFVitO/135RJ5wW6lYDVO\r\ntYCsgYCg8k7kPEuhHQBj5Jh9l0UtNsFfngC5G2MDAU5w4WD7bHx122URLKA5\r\nDcuBdolVBR9+mPgUjnsJguhzXdaSP7S2vsUaI2nOJGwDcMVTKWHx3hiJ2Ilc\r\neq7/aTlhbaE0ScrEhEhJiokc927z1qxlUrsk0UwkZXlEVEsfEx/+1dcDyNNu\r\nTKxUWNNdaTJhnjG0iMN7VgforclxZxnfwicMbCSp/YIhsWm/M9rMep7ARtjb\r\nlTbdPdCGL5biRs2PBV9FEEePNzHiCUZOe/MbJmbWEqJyBxBtx1iAqwL66BTn\r\nzfPstfK5a8/DGep3ZZISbZKDZPpnIVExbOo=\r\n=W71I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230419224531-580687ea-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/5016b45e56c26e353c77b172ebe43c9c/blocksuite-virgo-0.0.0-20230419224531-580687ea-nightly.tgz","_integrity":"sha512-+v1QbkuD+sX0x03+kX9i1934J2L3vr+fBnS4+TY9YK3B6mH08F9DUSCkOaEeDKVoIEGQbnUmXA//zzX09ibA1Q==","_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230419224531-580687ea-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230419224531-580687ea-nightly_1681956319982_0.19806045035898068","host":"s3://npm-registry-packages"}},"0.0.0-20230420021507-17b3de01-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230420021507-17b3de01-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230420021507-17b3de01-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"678a987260046136ea0876520a48ea30bfaacd24","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230420021507-17b3de01-nightly.tgz","fileCount":152,"integrity":"sha512-31qgDyBivk43EqWgBfm6v922L1Cssp5w2qrk+mBa6ySqNH2feXk/iSwrk8lQoHr0TAxY1Tv40gDKx5OidRJTGQ==","signatures":[{"sig":"MEUCIDACF+LCRoiFo5w+n27oqRSJ5Ht+7thMlFcuX911cTJIAiEAyWx+Owb4S4IZmz/7zMWjK7LLhDg89ULAcvq2BSV9F9I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":467250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQKFcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmquEA//b5yULUvc91BSgfw5VTKA0376XiPE1effaXdBcSegU/xekJRi\r\nn3zCxCRkZrF7lGXefRcprhU2kyRNMlRP1DSJge9pFmFEvDxXzQ13GIjcZTrY\r\nobWfDmBiydxasJWtBW+sHLy/nlfXl4b/INhIBH96G5EJ3Pd9Mh3NW9rkoRJA\r\nLjsMd6Qy0OS+JJ6V5ADHvFyTRevtU56hzVPmw0C8mrxxuDma1JNt7SQVc7sS\r\n79kyZ1QQaEROsa2Bbzqvlsr56wzi4E0ksjAfNOgAlpjzgylDdBC8sXd3OSG2\r\nAkVLXF216tsj0yXuPcVZnodUleH8kid3Hz0IVmg8kGX+OG4MznL1BRwhgl8i\r\nI2dI6uf6VTSRot3LOWplWdBfuVfSbKUzV0rCBSGtLjI4ud0Lwze3/wfuvEvY\r\nTzoYbsEYQwhvmclIIDVvr24/y/IT40/V0ItHOZY+pW+sZAZqhJt0r0jQeNE9\r\n8e5XZ85Ew9gTQBk/DzUkxeezQRKV2G32GDaTM6m/5QKiL9GnJqg0Xd+ZuB1J\r\nlCcuHAtQxmPRpwmBBPgwGGfFee9r3zVGjzAAZufAIFkAC6m549P81IluVSrA\r\nHtcJMOxdBUyvAIVHls3H804+bLTaetNJrTC54Ui7eRkybTjG04XslnilMUtt\r\nsrcDcqFpbhjTi5oXYW7BlI9sWX3SAY0AMmg=\r\n=ZKrx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230420021507-17b3de01-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/2202fe98eb3aab9c57be038d0695d511/blocksuite-virgo-0.0.0-20230420021507-17b3de01-nightly.tgz","_integrity":"sha512-31qgDyBivk43EqWgBfm6v922L1Cssp5w2qrk+mBa6ySqNH2feXk/iSwrk8lQoHr0TAxY1Tv40gDKx5OidRJTGQ==","_npmVersion":"9.5.0","description":"A micro editor.","directories":{},"_nodeVersion":"18.15.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230420021507-17b3de01-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230420021507-17b3de01-nightly_1681957212178_0.7297200075378596","host":"s3://npm-registry-packages"}},"0.0.0-20230420032755-9499a5df-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230420032755-9499a5df-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230420032755-9499a5df-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"0c61b09839f050986415b49d821dc1efcbac0774","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230420032755-9499a5df-nightly.tgz","fileCount":152,"integrity":"sha512-WNdi659wRn+YyraNOU1dP8hkRoQY1eFfz+BgR43yKqGs4UODJBsymOBgtkn4R0rTuD9PfyRWIcVEEeb2GM/6Zg==","signatures":[{"sig":"MEUCIGn7B13Pf9/qACgftfyvsEmGalqWHZGlaQlzn0uk0hfGAiEA/J0vBWNZ1rzsYF+mzX482DqW5PtR7s6NVlPNpQJ6jO4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":467250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQLJNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2lQ//Xssai88ew2zpVKYGtzj/jA0ldd/NTLYwQlpPHe8vccL+KVPq\r\nXgDMdbK/814LNbQ2yGbZFzCO3b4K1cb5bixJkeK0LX/F8Qx3Yn6hfCQcguKq\r\nxrrWyVyf0po2hoTLkmpuquX8m1gOM0egOvq/ac3fXw0Y45q41cW13eVEQz4p\r\nM+7qm7PmN1VEwZjbPg8Qn0XVv16wKF2SclRZp7KXyknyalsgHzTWC+EX4Rqb\r\nXqxqR2MVPqHLfqt+c/IGP2HldYmIm16sqFES4123wH0yQuEoRdUyRZaerszx\r\nrh+F5IsKEUQiqKM7Q9HCr0f77E/0DC2psL6Kz0zLW4W/PJYvOzgcsIL8qJw6\r\nWTmGjBkaQEq3EWhvoCkdqc3U/EhBSYr2v7SrANSik+xYGk/A73X4DqqDLXmC\r\nTu7XiL9UTJyxix96daH2kZGMabvh3kdrzIH0WMxWfC7yKR2rA3HV/x6aXtRo\r\nLNo5d+GVetJu92DRfP+e8Q6aniw+Q9+wCAXkafFkhP1CW+ed53qWByPD13fY\r\nPZ5QHwRdnqGC4Fmm0iDE4BgjLD9zQNc5aZ9n/YzsHeEI1vmK5uMGftMgVwFq\r\nkOcw6NyMkmyOYi1D7c85Z+9MMoL1tfLjbc6ydcXJa6R2Bzq2Zc3j3384j8WP\r\n0mAbom1E/HWXmgVstWqgwP8MWkuPSDYQi2M=\r\n=+v/T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230420032755-9499a5df-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/cc99e824fe532a64bc423059ff01bc2e/blocksuite-virgo-0.0.0-20230420032755-9499a5df-nightly.tgz","_integrity":"sha512-WNdi659wRn+YyraNOU1dP8hkRoQY1eFfz+BgR43yKqGs4UODJBsymOBgtkn4R0rTuD9PfyRWIcVEEeb2GM/6Zg==","_npmVersion":"9.5.0","description":"A micro editor.","directories":{},"_nodeVersion":"18.15.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230420032755-9499a5df-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230420032755-9499a5df-nightly_1681961549431_0.4370066245924129","host":"s3://npm-registry-packages"}},"0.0.0-20230420033423-a474fdef-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230420033423-a474fdef-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230420033423-a474fdef-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"bd8951cb67cd7bc0cb88bb4602531af2aed0c712","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230420033423-a474fdef-nightly.tgz","fileCount":152,"integrity":"sha512-Orgs2t9zNpSQpjjUzSqonbdk3WoXEgYNwh+Gxxjyjwnldt5CPr01YKNVV/mroMU6XtXYozgKCd5Oa1L00jK20Q==","signatures":[{"sig":"MEUCICF9aGpgxMOkESPRmT6HYz6XQ375BLoowvCFEl/fFQymAiEAvDv1sniKbJK+qObivD9nxbK3tkBfVM+bG5HEJtDqzm4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":467250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQLOHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWEhAAlHK39bPLju5ecK0UUDh7/owNB/OaPTuDdEnvc3Qup0UfzYln\r\nGFtugDDJBKOD4otE8+Fdp/B165wcv5nWqBN6fQ6cYJ/jZAleyP2LAVfJhzTO\r\noIvPRrJZMwgygls+I0SzqyBOrW62108zkSdNOcfOFHsLKzqweyDbxp+T3f/v\r\nvD76I/2Gj5mXt3q36PpUEJDPMDcjm1b5Q54NkyL5UvEVsBulxetYcOOwlHex\r\nL4Q5MSr5wXFqfQ0CkSRGGQfo1muAw/NzN/XovPIJFbUpAnq5woMUpDrH4apl\r\nYKNfm5bNfpA6KQSkTZM1PZUnqYONOyrIaeitwvWIJLtaGrg+3nkzAV+E5Bev\r\n/V/D2Q7XTGCA7h8qeiTh2z0GIwTu8Lq82bCt71DMoH4fag8KgWikIX+EiNRw\r\nuwGXp2HdF/IVIU6Ksboe4rka0NvrmJXbZr9qGyoH4Ds+yCJQoEX/IH04FaGu\r\n48Esq4OPCRVv3JnpbUxBwBOXeUIKoZaV4U5ADWJDkGoA4DyQ0t38sE4d0KyJ\r\nHe0wOQaUDHAkeG3nMM1TtuwQaACd3g+7of0Amv4E2VG2czXL5wXpaQCL63We\r\ngv2BfDlDnuZwV1WN01xGFDL5C3Zpz0Fn2lH9za+ZosPtDjnqqnIuKW23IJTq\r\n1giDsrKKiJRa5tKQUsnWYyj12nhjjWsgoDI=\r\n=Nl7Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230420033423-a474fdef-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/09d275b167fc91569c89aedf681ebc5c/blocksuite-virgo-0.0.0-20230420033423-a474fdef-nightly.tgz","_integrity":"sha512-Orgs2t9zNpSQpjjUzSqonbdk3WoXEgYNwh+Gxxjyjwnldt5CPr01YKNVV/mroMU6XtXYozgKCd5Oa1L00jK20Q==","_npmVersion":"9.5.0","description":"A micro editor.","directories":{},"_nodeVersion":"18.15.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230420033423-a474fdef-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230420033423-a474fdef-nightly_1681961863102_0.30409556873493515","host":"s3://npm-registry-packages"}},"0.0.0-20230420034403-72a706b3-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230420034403-72a706b3-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230420034403-72a706b3-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"16af7221a69f9603644131961c15b0dd97c6fa3a","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230420034403-72a706b3-nightly.tgz","fileCount":152,"integrity":"sha512-Xa97MQBJEJhL3GJI31en8IvFmfxTjyiysxMKvT6lsoM/PGM7BiXsliFf8UVOh9aZJF+hLPOp1xl1KcsdaMdLPg==","signatures":[{"sig":"MEQCIHEl68MOuSPEI/4EaFRKKT4O6mlTRtJ0taTiitp+SPkOAiA0iV/Im6GgVdPVfNW4A6sulWaWID2YqUBIOn7aoRxP4w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":467547,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQLYhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrhzQ/7BpADlJ6Metir2TG3yK/w2egbvbeJ6pxF0297BHOL45XNkFJV\r\nc74+6kF//SLjMno2nxBQozfL5YGKx8PRNmVi6LsFrSMZTXw/SVtLADAkLqd0\r\n3z6JSZhqcG7Te+LzgWozN6zp50RtyzZis75dPTXSsYQN8HPzSVstXU6bnxsT\r\nf/LnHA6pSxHVMQSCroC7NFT6DI+8hB1hZFLwkBos+GMFs2Imh+4gZPRBU8wE\r\nU77Nvx8ndDGlvo8cgeCO96cyuF9Bwr3BM34RAmmSTwMI4JNYF4X4nIaOm6OZ\r\nnLo6BbdVmNEVCLcP+Z7S7wZltjULZsplN9EfR8RWk6guooKuVjfUaFWVrOov\r\nA6epalqhepHjMDqYHtt9L5ELB5TfCY1LsvGHQgSfeMsWLu3qfRLnOHzZ+0CT\r\nXYhhxV8mSqsiLFKNNbdCjFUKOP0Cqu+VA+heVlyIc2DtCP1koYAbTPodyB/T\r\nECcgaX20oLhInGRKeMhqNG2OpipTAo6A7AMT8DfrVbSAmhWi/D17RgYmWnWh\r\nbxsG1wVWHd0whtM76Ni10C2oNM/Mw/jPwOXHweY+r959MtFmfduXMLthW8wa\r\nX2B96DBIXppxu0Ruxgzc4aQ1DyD8m/vHioGmbs/6tBvkDE/Jzzt43EaUQ7Ud\r\nT/Xj/k6VgCuAD+uwehNy0//mtsZkGiQtWno=\r\n=s+ml\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230420034403-72a706b3-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/e5c3cd2a07dd11b81686ce879f5709fe/blocksuite-virgo-0.0.0-20230420034403-72a706b3-nightly.tgz","_integrity":"sha512-Xa97MQBJEJhL3GJI31en8IvFmfxTjyiysxMKvT6lsoM/PGM7BiXsliFf8UVOh9aZJF+hLPOp1xl1KcsdaMdLPg==","_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230420034403-72a706b3-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230420034403-72a706b3-nightly_1681962529719_0.7942348187072712","host":"s3://npm-registry-packages"}},"0.0.0-20230420040504-2cbea2d3-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230420040504-2cbea2d3-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230420040504-2cbea2d3-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"dabf3f65f05462fbbb00507be6d0cc48797cc5bd","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230420040504-2cbea2d3-nightly.tgz","fileCount":152,"integrity":"sha512-DXlb1H6zlCoXD9LDN56vV2ZsKJZEITsWE6ETa6gFmGzBZyAZLxCLsHNUeawA+z8WJK8SSR6mWH8CmG84TN0VdA==","signatures":[{"sig":"MEQCIDyLkdMGXu55BA8x6B21l4yO4NLEkQR/o03f7C/twrpwAiB00ebZDr/Ng6DkHqxUSG1q3rhC88mqv+ozP2SqreXhGA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":467547,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQLrWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoDDQ/+MyuGRmdCjj1gXfjqPVPROdkZvHyLG+hbbLIog0+2t8FiWVQd\r\ndW60wIKGYNJsavaCMspcZ5s7q8T5lXBNCAcG1xYtWd3cXu7om/EFUq2Zmw1x\r\nOzJCDVCU8YUozaNUywoloqCda7LKwPPt7VwBh9pKaBaWmbIF3F96AS2JYhcS\r\nTnRjv9a2KIzQsusT5keAkZlm705sy8btG9XQCTGq5fha2cWnSOBt+n/5UXXx\r\n/ZR3AHvK2PZmzYmhowYZrKBzw1TknRUzahaFCNNRyyxFYsEArmpyB9XAwWdG\r\nN2Z3bv2gXGnFr9BSopS5P3rfsHzZOvgi7dI9FQGKbfgq2KR4dQ/rOzMFtnSg\r\nPbuxEo7CRZw1KBb5D+xruZx8UmW85WO1nLRISD+3fPF0WwEoaZig8AojkEvN\r\nYvUBJO+Ytq3qZGcHpEDgAuHCtR+pvGyCQ2GwSC9RGB/Xm3U9LE6OZaz+e/J5\r\n/ieLdgPi6tAarJlnfSwvkh99Y3h1s1OgwC8j1iQhRKU6942JQMoqWVwM8mkX\r\nKqkmcVgIZfNISR6iuIl29l9c67FI8oHcnpOlxls8mcJoIA4MezHBcCKTJbAI\r\njO/brt5Yhuu9i0KSfjm10cP3NUZjIBaNzNSgpG4iK5ntOv6wNgXkvJKJM/vE\r\nVgne2pM2WvKRkoIV2RG8uTBY77fZeZ7bSGY=\r\n=9ZDK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230420040504-2cbea2d3-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/a385226ed2cde2a7d4a4d2e0ebf63745/blocksuite-virgo-0.0.0-20230420040504-2cbea2d3-nightly.tgz","_integrity":"sha512-DXlb1H6zlCoXD9LDN56vV2ZsKJZEITsWE6ETa6gFmGzBZyAZLxCLsHNUeawA+z8WJK8SSR6mWH8CmG84TN0VdA==","_npmVersion":"9.5.0","description":"A micro editor.","directories":{},"_nodeVersion":"18.15.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230420040504-2cbea2d3-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230420040504-2cbea2d3-nightly_1681963734267_0.3950730223467218","host":"s3://npm-registry-packages"}},"0.0.0-20230420041641-17d0b170-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230420041641-17d0b170-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230420041641-17d0b170-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"fbc330c9d204ad740011a034d8b1ee58c0e96100","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230420041641-17d0b170-nightly.tgz","fileCount":152,"integrity":"sha512-1ce4bgq69RQkRicnbm2lJd1bSfY7QILbFt6PTqCpxLq+XwZAZw1GkgTjowsxSL8OfdBwuKWp6mHmHYKt/3OGHg==","signatures":[{"sig":"MEYCIQD2gJCptBWQ4182DEPowsX9u+rVgVgZqU62/gcWYfxxNgIhAN505lx64+c3hMhcY4GqUt0w0JQ7LDiF1M3v3gGTJaXv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":467547,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQL1mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJVA//TvpLxTkD1f2uiQ/69KhDc0RWNSPEA8wjNEBWAXljVuI/9thB\r\nR8v45nRE9lgKfbJiNyR4kOMHwmVUC+lrqk8iACW+70zB9cGUeNOQ3it1TTgb\r\nwzdVDwcS7U+PPLZzTxBr2OpBrblM7uOOnapCGJLwfJKjwPkej+5L7aOSQHQH\r\n245q0RddBFn/CQobJKJfDGBtVuK//hKgb/TPZpP4duo8QjTmjG/5mVinasvG\r\nuzf0/o6wl6rMbp7dJLUhOqATBRTTb6zWM4oTe8USnSYf0XUeocDxDOu2YR84\r\nljPWKgOpFl+4ybdCtdXqu4hl1b7TKkpRxLmoMsdWpVoPtG7uugB9Mi2mSbHL\r\nc9tpiXeZTxtI0A9bd8Jv7MCALHbXDYdMv+N2gVFpdNh76r6+tQZz0dsTGM5K\r\n6hp2kZlErYNv6MB89hn96kqbfVw5oEYvW1DE2WADcz3cGDcZZw6M0VjTAiOn\r\nu5+LWsNWkZQqLReUDXtLR7Vl6AnoAjMtth7kQoma/t+WUsg9AFWWIxiCz4FX\r\ne3aHU4d6/H2pCEScQgQvJ3hvzxw7No4aOmaijRfavZ6YRnY23zmhVRdZ6G4a\r\nNSSEOjTQbmfGmRiNI54alpwtnxOdLqZ8TwBqubj+JGSdwfQ6refULnlBNZyk\r\nXQ3vomrGUQT0u5TNSrldBlsuuWULFXaVw5U=\r\n=kBRg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230420041641-17d0b170-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/ff2383ef3fe36d88565d38414952840e/blocksuite-virgo-0.0.0-20230420041641-17d0b170-nightly.tgz","_integrity":"sha512-1ce4bgq69RQkRicnbm2lJd1bSfY7QILbFt6PTqCpxLq+XwZAZw1GkgTjowsxSL8OfdBwuKWp6mHmHYKt/3OGHg==","_npmVersion":"9.5.0","description":"A micro editor.","directories":{},"_nodeVersion":"18.15.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230420041641-17d0b170-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230420041641-17d0b170-nightly_1681964390708_0.9951138323555684","host":"s3://npm-registry-packages"}},"0.0.0-20230420045705-6253d7b9-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230420045705-6253d7b9-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230420045705-6253d7b9-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"ae2df296411ae31cb1aa486e965c67f35ec5cdfe","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230420045705-6253d7b9-nightly.tgz","fileCount":152,"integrity":"sha512-mCt3seVXFVuYVyfnM2ZFhsaWFFUBSGk+FGmdXU+8JLVW+zvw3A83la9jaO6CwHQcwOoVKgYvKmQY8VSEYnsmEw==","signatures":[{"sig":"MEQCIEDkGbJvfRVItECm+Eru64KTNrG0g75aLbM1hXR3lEQNAiAJm6cbo62pCRi0t7lX97oFnad59zM/WnzdE9l2FXJh1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":467711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQMdDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoSPxAAiTsk+b/c9cniuOJT0/0Q6J9e5z1xiIcOsFAlCWjyYTgItmm9\r\nDeLWL7IIPZkMLBc5Dn1QQSHohiNL5Lx7jYXMBm2c/7dWrK6gYM8j+I5NV37M\r\niI0vCJ+G+/uvG2AA6SRtBDOf5gIySl0RngJcYhrEHx9dcnPGCfl5PHLWHM8L\r\njdCzDzk9RH2Kxj2eIIWvdVUOC6GSUut28MTTPtZBLOgwt6dVaL4QmaYDMuYQ\r\nRzAeP5vNKiFF5L5nMap57koKC3vfsB93vI3/AJ6XAYnwBkDXvaJwhZ2kSd8T\r\nE6/0WpsVCDPHe4xwiwnf3mwcVLgpfYb8k1HdvF7WjgZR4YYnVSaGJ1vUVXQw\r\nz+YsCpYqWNuCqfaRSiWFHfIIg7ac/0M7kDjnwVq+i8ACDi9qPuhEf0T7hekN\r\nyzel8YSAFAH3yPJ1OHg/KkU6A2h44wY7AvSJsmfzK64uoLsPQWobXDawDxFi\r\nKII+QIVggf00Kot3WdBCn6eP2N/E2lHbrMDpHkFP9YHuFfOKw0eRs1SNdFYv\r\nsKGZld1pFfYosJ8MlxBOcH68Y77Ji9kJwwgKv9/8XQBpiio8n1/JYiuAOfj7\r\nR1O0fKqerMZAnJvURPKlZb0HNB4eY7u1S6vSgqKpqoecAgbVHQGPvS+O5FB/\r\nXGo7bEIBjqlsx2jT2e1BiKTRJKk/6l+ZwpE=\r\n=DuLh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230420045705-6253d7b9-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/c8c95a378249b211b415c3d568e19a75/blocksuite-virgo-0.0.0-20230420045705-6253d7b9-nightly.tgz","_integrity":"sha512-mCt3seVXFVuYVyfnM2ZFhsaWFFUBSGk+FGmdXU+8JLVW+zvw3A83la9jaO6CwHQcwOoVKgYvKmQY8VSEYnsmEw==","_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230420045705-6253d7b9-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230420045705-6253d7b9-nightly_1681966915667_0.30765983245511075","host":"s3://npm-registry-packages"}},"0.0.0-20230420050902-d9ba4793-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230420050902-d9ba4793-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230420050902-d9ba4793-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"b0104dfcfe30bfde772be0dc3b611c5014184f83","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230420050902-d9ba4793-nightly.tgz","fileCount":36,"integrity":"sha512-/Fv5Yg7nTwfeWclapXHNxKopFdwosWPXstXJzFvdYKuaPPd337mWtC7W63ir29FJhj/7ZdgZGGXltT/sxtUOgg==","signatures":[{"sig":"MEYCIQC+JhaMYaKc+shJD1oMtmReMqhIehokJu5XR0P2YrR2zgIhAOthSD4UiMcL9zr1aoMNyRSFyQSzlshuxC5sZqQTV3Sp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":251032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQMmkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoEOA//bb1e5DCiV2tUuQ+WhjK8B7YJnndk2M/KcQ+3oAepW5sxz4YQ\r\nCEILz+KIa+DgvnKiSL7P6BIZ+GWcuaEHYmcUxAqZ0EAM2rdr6IFZVhisahTR\r\nMuYC+rFbbYF9SWAOT18rh7rEUnFe42FfSCXPesy4V8vXiOkgEk5nNq1bXbqB\r\nMDjCyBWylKX51Vcy5oL19D7mHSGkhO35FzHIvXbc/pMl22I+pYTKQmdW2GyK\r\n3VaHPn8HGuLJdZzD3YAufOOZep2Ueqabjf9s8q/xBzb3kMJ7KSAUXaBblsts\r\n6T+5syc10LJ/oFYXRaBsQd1l8ryPdvZ+8V/uQrtAME04W5eSaaAwsnSJtuI4\r\ny54verscMESwWgsTzxDrdGIvo1CARfM/u9oyqOGUBVK0z616SIHKSIkbKK8r\r\nnZEhBjVCBE9oMxePDMNh5bLCpyc2FzyrYmvxx35QGx/jKLt4ambMRioTD+Xp\r\nMgyb9QB35X8X7uzVsuaAhhESCXEgXspILDl682NfpB95QjLYCpC/MUGD2i5J\r\nBvm/UVQQb0mZKZX8dFPvqaT+3cYC1bJMP8mFHV5Q8LJ7EmxQ92ykbCzquaX5\r\nPsr4NuUKgFIqwV+vcNb+OO/NmfdRkkrt4Vtlq52whbZFYMpTYmbFd0owWFJU\r\nzYCFmLsoEoo3uw7MxvoVchhswi76KvDjkw8=\r\n=mhCu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230420050902-d9ba4793-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/e013db02b33983d8180055b54bbcc033/blocksuite-virgo-0.0.0-20230420050902-d9ba4793-nightly.tgz","_integrity":"sha512-/Fv5Yg7nTwfeWclapXHNxKopFdwosWPXstXJzFvdYKuaPPd337mWtC7W63ir29FJhj/7ZdgZGGXltT/sxtUOgg==","_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230420050902-d9ba4793-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230420050902-d9ba4793-nightly_1681967523836_0.3280946334272179","host":"s3://npm-registry-packages"}},"0.0.0-20230420051213-c7ac2850-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230420051213-c7ac2850-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230420051213-c7ac2850-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"aa7f8250fa7e3923f4ac4d90aff4a45acb804053","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230420051213-c7ac2850-nightly.tgz","fileCount":152,"integrity":"sha512-Ktng4Be0z8U+y1EuRdTRS7NBEBiRZGgl5+2+qPKRjqsSa0eMfj8UH+l4d0q8H9dIU/il+mdaWCV2wQqqaHz4Tw==","signatures":[{"sig":"MEUCIBNOMY0pDpWydGJKsZpmQpC9EGhiIoZ1dnDzspbKm2M6AiEA6QdOJ2hYyJ0tE37bI6HQhTGnwOOkfdlj9q7HPZw+MbU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":468063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQMpqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1Cg/+KtotQtNYx2ITZjCil7BlmtnXUBKM6N8PrzXad7hWk3UiDGLG\r\n76VWzlDsaHeDYCWDPPVPPjupo5LUjDA2uA5zmr2jvwC/dzabD9Ap+6IoRsr7\r\n9f815WIdFXqe9AIdUWxBAE1dbqYNujIBtuoB+4PZkhI7TZOkLepXsYQl24J9\r\nqk4SyWZQwGUKhnXskji7zC9LG/27R7P9hxNYPbBioDGCZhpMCDwzFbmeeMqo\r\ndr+JOpXWVu9d0JykL7YhHh7ZqovZoeWnE9uiFeJ68G3AlfGa2s93fLLuAuH9\r\n+KlxDbMVkPMcIV8lFoEy3FEEDtYIP8zCTDjIPBTbhJAE4iZHfogWnexsU81E\r\njdOK7Yz43l0mHTqt0xm0qWgpmHej26uyuKeLWT6clzMoqQ3rrQ8dXmZ6AuhG\r\nN+xmxgbr0+Nvk6MeJ0DSCQ8CvspQWo5NMzXY049o3uLb2wCSPKUHiiPXm+Oe\r\nPaLfgm0rHl5o0pytg0N9sR42mQapkZUOry71d4GUSgUaUFjfpFjbXoRJ+H8Y\r\nTHzohBc1uk9xkX/qEeW4OBRd00beDtq2B6dMphwmNme/xYjTtwGasBs7ttAH\r\ngfUBvsBl9h7mgxVo+TBOSyXo8UnFAMBUnFBV7MqP4ycMMa+xjwquSxHzpvRn\r\nrqug5wV+SDMKqxjgjQATVRHxZpSLlYAMw2M=\r\n=mvfS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230420051213-c7ac2850-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/1a46fc5d3a8f17309d60861aa3975c43/blocksuite-virgo-0.0.0-20230420051213-c7ac2850-nightly.tgz","_integrity":"sha512-Ktng4Be0z8U+y1EuRdTRS7NBEBiRZGgl5+2+qPKRjqsSa0eMfj8UH+l4d0q8H9dIU/il+mdaWCV2wQqqaHz4Tw==","_npmVersion":"9.5.0","description":"A micro editor.","directories":{},"_nodeVersion":"18.15.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230420051213-c7ac2850-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230420051213-c7ac2850-nightly_1681967722314_0.4465465065198415","host":"s3://npm-registry-packages"}},"0.0.0-20230420052205-f8710675-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230420052205-f8710675-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230420052205-f8710675-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"ed6dee5a17014b7d6e143b66d255e7f2b89cc7f6","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230420052205-f8710675-nightly.tgz","fileCount":152,"integrity":"sha512-9NFuvhmKb6GL94c+LJi888HvRVPJMFNk1oZolbu1Cnvgevbbct/VsYIYlhC6144X75s86QrltUjO3fUy7JC3jg==","signatures":[{"sig":"MEUCIQCXRB2/JGuhyyLAuNHcT1qC7rJlnOLp1NRRZlKXVtDR7QIgZMDApuQuOsP1D0IuLAZ5FTcyH+q2n8Og/qd+/XApxT8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":467902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQMzZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpk8w/8DcZ7rQxAiMnBO54qZYQnpJhslmGVsFTHLGopWRTDmO3yBkz1\r\nsyVIx98RerUekTiRpDQreyM2VgLFR1x9tF4SwP5elDuY43Odr/+lnjqdO4Ke\r\nmYYm83ZeLSevuGzi1ztHZkocLfc+uCii+XsWp6ypEj3xi+wi0A0FqOohML+V\r\n8H98LEX1oWaCsF3qAipHYsXNNfeNWW/LHkda9z6O+2+LxG+m2xUhBfecVhHD\r\neWCAnl+5DybYzahfDndELO3hgABRH3SYIESXx8uKliHi3p7+qhCbn1XZmKMq\r\nbm/S2nyqCJnlvF9jDN3XCK1PWpU50GWjULTdowZACRunPSsuUv5CamzCA2c2\r\nfml5Ib5jKln1+CLEA635xi1DUdnNsBOCJBw9p3RDRHZMwCxqoA0XyDJ+2RHb\r\nit92a30hFZwIWcFQX22QQBBZ0uxGTuDPqJvVmwKO2XuVQh8ok3WAbjYtkJAN\r\nGIvrcVEKZIms7t7bOBHeD0b1+t40qWFo2QQ3FWaZN2q6G+u0OvEHKoFx8Blk\r\nxihsQVYRISBuxa2/3hKspkiK8onVWqLTwPA0UHlQEIFdnx077k0ZrBhz7tkP\r\n4IOf71YX9ihxxGI0nz735+zSGdrtzmza9t1ugmfiLWAmB9shDXnZR+gy7iRP\r\nVzL+NqZagUYBdwuUEmvS44Yrbs5Rxgj+92E=\r\n=7A21\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230420052205-f8710675-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/88aa83074d91aaa67027144af5d846df/blocksuite-virgo-0.0.0-20230420052205-f8710675-nightly.tgz","_integrity":"sha512-9NFuvhmKb6GL94c+LJi888HvRVPJMFNk1oZolbu1Cnvgevbbct/VsYIYlhC6144X75s86QrltUjO3fUy7JC3jg==","_npmVersion":"9.5.0","description":"A micro editor.","directories":{},"_nodeVersion":"18.15.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230420052205-f8710675-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230420052205-f8710675-nightly_1681968345459_0.88898063828432","host":"s3://npm-registry-packages"}},"0.0.0-20230420053507-ac78edf2-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230420053507-ac78edf2-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230420053507-ac78edf2-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"d581f46c0e36215251ead54515b9cb75981135b6","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230420053507-ac78edf2-nightly.tgz","fileCount":152,"integrity":"sha512-vdprcZrAg8lCzhDcx4hSvRcgEt9dl7/r9evvUA+SG+0VFk25PAnV/QSeTPuYu1THQ8wERi35EOiII1K9FQ7kxg==","signatures":[{"sig":"MEQCIF5T4jggdvWH7AjZseUx1QeDDGHcAL4i384jNBFc4NHhAiB0aDv/R2yX1h41oE+qHlD3k6wZwX+nn+Y7NKTmaVb08A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":468104,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQNAEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo97w//Up54L+rwSsPHtdojHap1BAxLquEwqoZ9jUHg+L7WdKpnT8PV\r\nxKEGEHHh3DG60iVr9rtKb1MxPDCkUYVEtjr70FoElUHe0w4bm9jwN0K9WAXT\r\nXLrRm2WQqISxG+eAW10QLl0h1qIr6s+eLlEEF0U6MNcwLtNxauMxLvFRL/Tw\r\nHbtF+JBXtykHsrIN0nrhgMcbPQb3w+bnRxUztmjl4WRW+G+AIeF5Se25ZbaC\r\nS6U2+psJBoz0ete4+jN5Iti0beNZkfJ4vx5Cuwfc8OCigRZB8XUBcJtkoaPP\r\nTxZFETwwuiRS1aXXeMcNWr/aIr6vw4FKpGTKTqV5LZUvXhrgkBlp9D/Kf4xV\r\nUjsRLe8Bu+iZEU4I/HzbbbtnFSa6oTJpqlPaCkCvYjIN+e9uGudPT9Z42/Yq\r\n0dJC+eXvGxqxV8FM9mO7Aw/H0z8sx0+g5BljhbJ54sshUGv5r3b9VmZGtRXb\r\n+F3nTDvIh02kpAZaBnDSpcrwNAdhb1JkE1+qoFY+qhNBeYlZEHGKc5uv3Z6M\r\nPmir4SmIUmGaEBgLOAs4caheUTMN3gUTUMPbZ7on0POUucWs+2oMPG2r63n2\r\nvaIZXwF38IIEgfOyFqDVCX4Qufa0qBeb5PVFh5JQUOlB5rGbSgXSooYZizE0\r\nzX5rU2lW5Mq4rEm93QP9u39/JoIzbMe9uXI=\r\n=kvST\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230420053507-ac78edf2-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/31f566e6ee55babae8276105a77e216b/blocksuite-virgo-0.0.0-20230420053507-ac78edf2-nightly.tgz","_integrity":"sha512-vdprcZrAg8lCzhDcx4hSvRcgEt9dl7/r9evvUA+SG+0VFk25PAnV/QSeTPuYu1THQ8wERi35EOiII1K9FQ7kxg==","_npmVersion":"9.5.0","description":"A micro editor.","directories":{},"_nodeVersion":"18.15.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230420053507-ac78edf2-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230420053507-ac78edf2-nightly_1681969156672_0.10199526252251112","host":"s3://npm-registry-packages"}},"0.0.0-20230420060121-36f39072-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230420060121-36f39072-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230420060121-36f39072-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"7dc8de5051daef14f1fdf15c2f4ab10046b8f875","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230420060121-36f39072-nightly.tgz","fileCount":152,"integrity":"sha512-CpIX2/rjk9HUKGoIrgI0uwkJEIb38OlniIbxhWtINNXc1F/cusUjkR3XTWEWkcAmmYe2YRIpcUIMmqisi8bt4A==","signatures":[{"sig":"MEQCIAX4pOnqC4MvosMTpo9q8ciTKHufzCdWdZinYz5FT/OiAiBPt2fqeySwk35JveYOZ4cKm+1nR3koZ+POZ8jEcoZc4Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":468104,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQNYOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpSYBAAgAgmTkCn1CZYFL0i9oe8wihqiWrC2tlMTU2GrNap2ai3OVXt\r\nkvX6BY6UUVNH3JKxpSs2QzZ+oVty2i8oMQv00K6VEPJmgmiI9PsBxQLT46QT\r\nnE1CwsAHOs7lpGCMvv7McD/3SlGIJHR3vqcdR3URavnSDV+jZJAX2BcxNDeO\r\nAp2gDdk9ZxpZNq0Ya3/+5F2mLsA3KzWfaO5RXqdWAXda1BULPfIiq/bt3wat\r\n2VrEi+KE288rcXso/fEZGvJgLRg7+n3X5fDVmEY+unM2H2BfL9EKK9abGcmQ\r\nhfZzf5GrINopLJOsuaWRwb1i+rQ91bFZE6rbzOjOEV7UY8N0gSm+w9NY/jdS\r\nuOkehdBctNSZclI3cjOGQRmY2ialUrW73e8514s04vKk8xMxEqbxu44Gws1K\r\nVvsdEA6jjHe3q5EYkxqgiNv+tS5F4QLkpfVA4k5aeUH7VFPzoSY7MaVL5dtx\r\njKwdGtO7CS3AdXlLM1Mv8FW5KdVU86MdKYXzUYAhaJKg8n+KygPsUdzVZZH2\r\nnTIPAdzmoFNVuGGLGsDHPkfMaQZZkyQtWLAcytSjsKbGUn18k1GYsQWdAvI/\r\nJ6CWJHBqw4XPy0NE8sW3mwzjUwgyxii5Ip2yPHJxrxSY40ppVBgL8zVoAR9G\r\nZQK3RntrZBVkvJaIVNwJHPeJajqC8i5MidM=\r\n=Vd29\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230420060121-36f39072-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/1ae3e47058d17e587d10a9335b8dba8d/blocksuite-virgo-0.0.0-20230420060121-36f39072-nightly.tgz","_integrity":"sha512-CpIX2/rjk9HUKGoIrgI0uwkJEIb38OlniIbxhWtINNXc1F/cusUjkR3XTWEWkcAmmYe2YRIpcUIMmqisi8bt4A==","_npmVersion":"9.5.0","description":"A micro editor.","directories":{},"_nodeVersion":"18.15.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230420060121-36f39072-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230420060121-36f39072-nightly_1681970701968_0.4233870814553389","host":"s3://npm-registry-packages"}},"0.0.0-20230420061122-b8699818-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230420061122-b8699818-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230420061122-b8699818-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"5161f4574821b848e8662f887cf55fc958fe23fd","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230420061122-b8699818-nightly.tgz","fileCount":152,"integrity":"sha512-eiFiD61jKebD6vybUIvjAjzUW8wX3eoEayCeh8NvB0pf1uQ0hv13TNOyKCtgS8RPpLRDDDaVRjgq1mRa50xw3Q==","signatures":[{"sig":"MEYCIQCxaPLHE6kMimqEz6tlTfNT+eWhGOf/M+vikPqUglukRgIhAM/l778KFdaS4aqJ9PPb8Ookr6HkJ3t02RLsBaR+QJsQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":468104,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQNjtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmow1xAAhjIVj3Aw1f5N+FK2YrZPWx4o11bhlFNiZZ/fftUqPZnCVvGs\r\nISGa6oCaJN4EjgCsreqH5zxWlbiJOTdZRKGdLNBBbDBSehddM+R8N8XE8Cwu\r\nswKFaUBh4PdNNP83uSjkEpf9JxsCCrFFSRSpK9xKyXfCqrUl9zyfTirPBPS9\r\n3wnr6DyVWIliWO4QTm0483f7Ixy/MnWCjQBWNVrNoPAY/45z4lO9k4E0KPlN\r\nDlSqmVsL10FtvRloyz7lDE5Yy+cOuq3SXRZ1O1LGBipiNp7jIfHnKtHU4aSf\r\nElcsOqBmX6a+oeqJx8Ymw9XTVuXE1t9uugnZoquzmLl349MsdNrhajg74T5v\r\njRB7EWm65XDqXrTD4+b4dRinvjcWJp/7EYyCexNDjKHEvKMr6THeogipjK75\r\n0LZ48PFrWXwcQZ2orHTy0QTb6QqgEOM3OCEUudiyUHh1Lzk85YreLpilDfvW\r\n44WPnL/0H8YUeLdQg/Ch/r6GZADEyqfay0qAKqBN7/xpPcIi+w1nKMpTxv04\r\niUty8/PWMx/1fHH8TF2DHYdjBrtq58bwpefxuJdxhUgrJdEbZkGy2ybpG4zN\r\nom/JhZpw7XDRFV5LFrQe/JPuOUhwJDbMCwpuz97i5q8NuTMK8K5/pElsJaBU\r\nPI4h1rnQFSgbsyPbwmc/xFNhRXq2lXSmu8o=\r\n=v8bk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230420061122-b8699818-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/8c3639bb9d0df5d507c894b38d98578c/blocksuite-virgo-0.0.0-20230420061122-b8699818-nightly.tgz","_integrity":"sha512-eiFiD61jKebD6vybUIvjAjzUW8wX3eoEayCeh8NvB0pf1uQ0hv13TNOyKCtgS8RPpLRDDDaVRjgq1mRa50xw3Q==","_npmVersion":"9.5.0","description":"A micro editor.","directories":{},"_nodeVersion":"18.15.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230420061122-b8699818-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230420061122-b8699818-nightly_1681971437310_0.6772558568796057","host":"s3://npm-registry-packages"}},"0.0.0-20230420070517-e32016cd-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230420070517-e32016cd-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230420070517-e32016cd-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"ecf1d4f7bfaaab8e5f788a41c1ff3a8d107e309d","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230420070517-e32016cd-nightly.tgz","fileCount":152,"integrity":"sha512-br3HrU6o192A844XkrWpPEqmxZp1h526W13W0s9PA0MwRKN+OzzrOmuqPKcIzLL6qmzIZxcKyjSFejIuOduZRw==","signatures":[{"sig":"MEUCIQDULYAD5EBqNGxlZExgOylNae5O5T3z7Kbun6/IBDGyFAIgP4EzixIU2Fha62R24LWsss9d9nv9RMKaAwh9zSe0Uzc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":467440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQOUnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpzQQ/8CLp2H8ihThblU12jilqDdAV6yyn5eREbHe/i4/ebE+YGFBci\r\nSK4Q7sbuBqXrKcSLcxp/oGCgepP0oXEdGGE3vGxAuY+ZF4R58Dckm7C0xGGX\r\njuFAxaGFtp1Of1AMlEW6kUcYG5tOSBkl+IrjHb67kW2fB5coJ/RYqNDefoRC\r\n70TfiLGNvoe/G4K3yeUCTmEi+RAef2+ue5cXTiFAVzax1XfpXotQ1fEYT0yO\r\nKiVgYtKhnq7IQuh0+Bx3X0MRiAYDxOpfzZyk09lR33pB1U7tt2+c9DbtmRJ8\r\n0w0rTxGPTn+6pHW+CO3fMZDQlylC3hA2me2k6ijT0YibT/Q2A/bkvZLKyOEU\r\njZo+/0hz3VZGrEwUkC7NJbuZvHWJkbWK9B9mx55vps0QxKkmMLPiN6Tc7USV\r\nlVdgZTMKipO7rptX/6eCbp0pmsmwJSCRaDm2VgWizuOJVFNu93Vis8nzzh1Q\r\n7fI9/U2pG3Xb8DcPaLGNimGICJ0ochlB80zAo90m/sMI4hcBhDVUq8Ix7J5p\r\nFOqVU1wph3I+ZS5TnFAR16x70Ra+x/eQVb13bRmDx1lpUosHaPllnuAN0dZr\r\nfcn/b/RY3C+7YzS0nMu/7ToeDSSZSf25DLNMaEiqWM8pG//5ZlgA73nA4oBJ\r\nAidrF8Xd8suvZ58YHb/pMR84mtTt4BIhSGI=\r\n=IbDc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230420070517-e32016cd-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/a7225cdcb7338779749c84df9ca43663/blocksuite-virgo-0.0.0-20230420070517-e32016cd-nightly.tgz","_integrity":"sha512-br3HrU6o192A844XkrWpPEqmxZp1h526W13W0s9PA0MwRKN+OzzrOmuqPKcIzLL6qmzIZxcKyjSFejIuOduZRw==","_npmVersion":"9.5.0","description":"A micro editor.","directories":{},"_nodeVersion":"18.15.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230420070517-e32016cd-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230420070517-e32016cd-nightly_1681974567185_0.464598604237465","host":"s3://npm-registry-packages"}},"0.0.0-20230420070759-dbe39fdf-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230420070759-dbe39fdf-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230420070759-dbe39fdf-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"bb045bbdd8859cf3af92da5c7225504a0e266120","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230420070759-dbe39fdf-nightly.tgz","fileCount":152,"integrity":"sha512-nLtJy+6fzjayUj4/73RwnzH4foA5+6lc4YyacE5N9E4avkUuGxVXYxmlAAL41n0qMq4+uzw1AyJxgISdXv1Zbg==","signatures":[{"sig":"MEYCIQDBMlBrFJzLlsYZBvynQQaJEdcngFDHWMqwebkqBZZnLwIhALM6ih3ysbbSi+YpTIZ+SYaiqD9mSQftRyv5w5162BkV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":467440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQOVfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmosxg//SknV2EDKYkWtOHGkpAqwgoacLmEd8qnxmDZ+zaGcCAAnAdQg\r\n6gsaNcGKBhnPGVTRnchagqBPEY5+ReQsNj2J9AGTh6RlNM2M7PgPTJSCiVms\r\ni6ckDfjC0+tyZw2xnHjpAG5XYME0ADYDqXYloS6LuqzuTkJxtBaYkpmfTHky\r\nMb5DEaqEkCCvjs3j2mp8+yjOTbsRcd7tUnd6VZu53anCO9xFuAsgHYZchD4c\r\nLP1pOMfm6wjYjwD1qqamKMcbtpI60nVU3GElvNprhv0Dw0ChMvouM0xTE9yv\r\n1RUFKBSUsfElqa9wjjTuTYQzu06F/1kv7WXBcllhy4TMHqbWAFqeTzGvTVSH\r\nYxt8gnJzGzGOa0M25p8jcHk2xmje2dCSSZITBZQrviPIAy1qXIO3NKMzijj3\r\nJCm9hXggn5HidnPeKXbyRM3qMy2JtzfELTUG6XTyOASI8EHjx7dDs6C6XFtQ\r\nn95k5urNO48B27iQe17BDivw4H3GNpDL3kI19auiPRcxedw4Prr4tGzbICTK\r\nFQnKaw+2/j2bEpsl8JCxbL6w4vM5pei7lNvQsyCPaqkDmNCltKc2gibIGKYl\r\naqTKVvTVSy/W1IKTQvIdMTLNOCi2WFUPBdQWTgRZQQrLaVXblvkXhKug90QB\r\nxSuNqfDx9HjmBys7Q6D2w3t5sZmBRQI57f0=\r\n=SuNf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230420070759-dbe39fdf-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/2d18ea521e6ba33fb28b172bb29ccbf2/blocksuite-virgo-0.0.0-20230420070759-dbe39fdf-nightly.tgz","_integrity":"sha512-nLtJy+6fzjayUj4/73RwnzH4foA5+6lc4YyacE5N9E4avkUuGxVXYxmlAAL41n0qMq4+uzw1AyJxgISdXv1Zbg==","_npmVersion":"9.5.0","description":"A micro editor.","directories":{},"_nodeVersion":"18.15.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230420070759-dbe39fdf-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230420070759-dbe39fdf-nightly_1681974623323_0.2306193688336997","host":"s3://npm-registry-packages"}},"0.0.0-20230420160324-857b396c-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230420160324-857b396c-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230420160324-857b396c-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"f67734a0efd83c613ce7490cd0d7802266e4a479","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230420160324-857b396c-nightly.tgz","fileCount":152,"integrity":"sha512-xt5osp4FI0Q8hkymhH/s219tcMIcfjVFA6PDb2sqEnMBJzabRg4xpth7v3s4pVM2iNFnEdGUzdkYw2HPllTIDg==","signatures":[{"sig":"MEQCIEZ93fn+e53rRJmeRy3JXCmBTsOCL1M56J26uogMynuqAiAR8ipbR6S68a1REaEzJrX3DVNb5pewa62tLig/pi4mCw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":467440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQWNjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJww/+KPXQV+HYnpHJf6Nk7vS1dalbTiBSQ26OXTxzlBd0q6pzBqbm\r\nzDxh6KIT3oy6vucokAml1nTkz2SS5pPUOpWZdY16wKwFx+P5luD+55UrJnOI\r\ntjwQNjVIkCLqvnbwhtyJA9pkfLDcKvxolG+nousM5BRAJOgBPAR0aydqOfJy\r\nLUFvpdhWnkZPXnUj7b0WaC6TyPC1B8HYog3ajxF7irR+TNbiuMLfmvVeXNTf\r\ntSt4lgNP9P4bG9BzjlxiFZpc457A3eSLUc8tp00lVI0KeRz1reknJBCMdDfV\r\nZ8hVuoJcF1jSteNtlMjzejpV/4E2YwOrXXZruDVVV5fGVyD4kLachndBsttC\r\n5Y4Da2+sXtuy0orIGQq6xHz4cIAhLVbVO573skLVFDd67myayvfLpZhH4brf\r\neA3HQ6T9gKjHF/xNmLGtRBHI052FsCi3uhXFMAgnVQucWeflCl7NR5UGDKCa\r\njaBDFyaJNB9CKO6EpSBwzSJeU+hMVuHkiSRKVF7hkYi0MtMxzpmpEB/iueQT\r\nMgObPZiVo6iUIMPVfO58R9HyyGOaErlNsLe5aJI1TdU4JMOWlkIGqzxq9nMh\r\nrVBamiH9cgG87A6mlH6/bOkMEuG7GAnVVnX5tcge0iboMolIfIhtUM1rIQha\r\n3/gXmL2J9d0cARgXFVppd3GjjpXsAS4qzxw=\r\n=+sgt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230420160324-857b396c-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/3d6048155aebbe86acc2f7e88c8c766a/blocksuite-virgo-0.0.0-20230420160324-857b396c-nightly.tgz","_integrity":"sha512-xt5osp4FI0Q8hkymhH/s219tcMIcfjVFA6PDb2sqEnMBJzabRg4xpth7v3s4pVM2iNFnEdGUzdkYw2HPllTIDg==","_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230420160324-857b396c-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230420160324-857b396c-nightly_1682006883173_0.6483257763087769","host":"s3://npm-registry-packages"}},"0.0.0-20230420194752-2980755e-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230420194752-2980755e-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230420194752-2980755e-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"05f444c0ef2aa36a653d7a1312c7ea9de8557625","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230420194752-2980755e-nightly.tgz","fileCount":152,"integrity":"sha512-wAQKQ1b3LdDqisdiWwIIetoISXCt8VSoU2yNqMd0beZ8rpR5DLElc1YsRJPUBmcwZXNY1ucRihFXmXb4B/aPqg==","signatures":[{"sig":"MEUCIQD8dmtcrfk8diNHCAuwasm4J4oRB29cjMNYJRkjlP/DngIgC9xxNveZINbHw+fXPWuApeDCA7cXHQ8GPM6LRfGg5OI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":467612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQZeUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoyUBAAkAh1H06JjBqsaCQr/7B+M7kq3PUirXANvbcqbz9Y4z61Nmml\r\nF6IWuWU2LD9UFt8Jt5Z9blL7FzgC1Fs6ZUXTubY2W6ROZ/k9ekGJp36q/kgt\r\n81G3c1la+85HDZDw06ECPac3zkDOAxIwetAM2RsvA5fgmfKkOVzKi/+8Nxt6\r\nDkmq+Y8o6Od9ZexnHLjfsZcMzvq7FqJ5NWYFOfdt0c4MVs26Jab3GIKzHTty\r\nuvD/tUC8QxAtlocjPbPc7zNoUViwKLgZVZwUbbbR4M2FbXGlkyoOS3kl4uLB\r\nVQYIQk4gj/vEP75zpqbUK/88QM0uMYBYeGxp5357xMSOhphVII1LLhYkcdHI\r\n/TjAjHj+1GW+99Nmgez9SlTJ3Q9iCgjuCqs/+/YwttJ1Q02Y9banxfKAb22V\r\nVXLkmXB/u8OjH/fNMO61Xl2FhW8Yn9RsbPlt5QLGUa24NROf/gBiR/8k0Knq\r\no0apcvx+R3ZdjLrZyYfUSU1lQRUtsMfGRU0nXToWajNon6NhkiiTp5U/1OEQ\r\n6sYForK2Z8dAa8P7RVyPwdwjSB0SjoAwhJzfeBLktUTl+oB4VpZg6z4VJKcH\r\nylYv7k48EnPjZVxqFOGPGKMzzrLCJgUNabXdTwkt0p+rwjnt+od4BWyVUWfi\r\neeZXvbFdEul5H8/N+RfDrlErXsS4WHT5+EA=\r\n=AYb7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230420194752-2980755e-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/f1ae7e43a711e2cba7055b20ea252be6/blocksuite-virgo-0.0.0-20230420194752-2980755e-nightly.tgz","_integrity":"sha512-wAQKQ1b3LdDqisdiWwIIetoISXCt8VSoU2yNqMd0beZ8rpR5DLElc1YsRJPUBmcwZXNY1ucRihFXmXb4B/aPqg==","_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230420194752-2980755e-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230420194752-2980755e-nightly_1682020244070_0.4902786204635803","host":"s3://npm-registry-packages"}},"0.0.0-20230420210727-85b7de79-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230420210727-85b7de79-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230420210727-85b7de79-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"6ff8dff30fce4fb051f3cce9214e2f2a1f126a51","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230420210727-85b7de79-nightly.tgz","fileCount":152,"integrity":"sha512-9Z4FLdDcRS3mIxwnxy74aKYmRxZgUD5+yQnb+PtJqxbcl2CyGDIJe4U7O8qgE7ad/d7sHGmtxQDOYdZoB04AYQ==","signatures":[{"sig":"MEUCIFkCehYb0nzXEPFiN2haRORHYf+bwd4V20sXlaEflNHDAiEA+PSRgGKEL6lvOZdRl6G+17nEpmfQ7BFCMsHNgygMBB0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":467844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQdefACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/YhAAjZIuJMzwylQkBz6S/xScT4H7e6rp5KuamiIQ5tmwzKb5phc3\r\na58CB3UoQ6+gGOFLdhWKNXZsbDnawnx2/qnIWozU85I0lrfBNTMeum+FS/Q1\r\nWUVlrBDrrlEToc0gxR1986gEheUy61/vQvIKezsRNecxK/6c675HAuvpktKX\r\nSQBJXccvEZZKZlnXbv64X9XzE6yBTFXRSvoY0Pcq0gsuCA4H3jNHDhg5dkPY\r\nnQ7wMxIB8GUVmwyGQJ9g6nAIsjYc1Zs3RtQmG+jEuLNo7u2eG+UmqyJoR8SN\r\nZYJhzf/ljJQnTXpX4C7x++KclZF2y+cHEB819gNTstgRLOrgdGwhD3HUXzjp\r\nMaTLyiQZKha6HKPerNklBA97ZuREi8U8KxOKZsX+TveuaoNc5IW4212XO0y4\r\nHt2u9PyJSpgRWgiJJmVmzrXdgKvUanHN+K8wafRV/2RdGyfNzSoceWowUrm6\r\n+EFeGmLX0QUxw8ZZXUnTow6h9NZ4Hpk7ejVqozUgY1TkuZAw4Wd1Rd9bbGy0\r\nAkvSnsdCoeRnt/lRgxuejtxRy+6nk09SPbbZdmvbvdPlWrKwv0+jNhP18yzE\r\nRTcLB7BUpf0qIhPerX9ixUEVTkpo+ckHN44csa8MzfnvcqdOice+NBMIkugz\r\nYMUy6CVc5q6bwNdZcc6BFs7judzXnD5y0dc=\r\n=p8MS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230420210727-85b7de79-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/d5c7a731434f49460c8901780edad7d3/blocksuite-virgo-0.0.0-20230420210727-85b7de79-nightly.tgz","_integrity":"sha512-9Z4FLdDcRS3mIxwnxy74aKYmRxZgUD5+yQnb+PtJqxbcl2CyGDIJe4U7O8qgE7ad/d7sHGmtxQDOYdZoB04AYQ==","_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230420210727-85b7de79-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230420210727-85b7de79-nightly_1682036639281_0.2046320770458223","host":"s3://npm-registry-packages"}},"0.0.0-20230421132835-1c52a918-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230421132835-1c52a918-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230421132835-1c52a918-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"dist":{"shasum":"48587caf7a07861cbc846f7b156c3ccebe40dc79","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230421132835-1c52a918-nightly.tgz","fileCount":152,"integrity":"sha512-Q+s669pQ/9ujbPmT3u+6qixDhyeU/1oWbRkC+a2H23hDn68q9JKMHzdhD++oaczWvx6Fb9dO3IqcimniwTDCvQ==","signatures":[{"sig":"MEQCIHs2IDMs0ltWixqR/w9qEaUmayMU1dr9PpVE5AtuSvqXAiBl1uL8vngrsHfZ1C2DugrK5EJCcTQvRg9A4n+rNzXWmQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":468511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQykcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0ow/9HT3Qveo3CxBeKO/589Ii9/FO0gUzXyUIDnjUgDMWq9/rw7+3\r\ndCKPDAGr+QbQlc71bbpH0BhqRqZ6/yfEWU5JpngDIeBPaqfgpNRlKb+sSPzP\r\n8HN3FK8I68E2fU1bDnCqt94GJ2tqN/bEqrETYdoYBgEtt+/mkXA5nSq3qm/D\r\nKDrk/S3q+Pos6Po+RMXHn2GIFcEonm53hidAbVvRAlS8/spu6dPcDQSSP6Ej\r\n3668qyUKEmyad6zMtOi+34QjYkUpYuyWe0JPP+gqvXyMQUkyyh6B47WL2C/S\r\nsdWjiAQ/1FrH2hhsTpd9dNmVTr55v+gmuQ/qpJFKIExLngqfv8INOQ5Ye3SY\r\n+1PdHAQsHtbETCODudipxkZino6od032pmoPgooCpccWpvHqi1wT+2hNz4mD\r\nS6fo22fu203fB9xb0ay0roN4dDmJeZ2uFpJ6jxDhmdgVMum23RsZjXkwZhaF\r\nnjse3reNXXF3jxIXdcczArieiSTjAlBBv5YlJPdZydKO9r3Um5gaJYvjIF3c\r\nLBVdfVLws6y0SiTSuBBSTsxM4SgtIPcR8JEhWz87KVpubQk8E8AS8eNSAwjV\r\nZfc2PaUhYw7AKWMX6oapEAqg8s5BLXDnhh8L947rhwY2rKeKBLmMt2HzX6M7\r\nrmiPwysKdcnrzeKdtKl6//thOCsVV+aDJdA=\r\n=VCtr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230421132835-1c52a918-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/a57dd08741df95028fa130e049dcfc5a/blocksuite-virgo-0.0.0-20230421132835-1c52a918-nightly.tgz","_integrity":"sha512-Q+s669pQ/9ujbPmT3u+6qixDhyeU/1oWbRkC+a2H23hDn68q9JKMHzdhD++oaczWvx6Fb9dO3IqcimniwTDCvQ==","_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230421132835-1c52a918-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230421132835-1c52a918-nightly_1682123036238_0.6772900729399192","host":"s3://npm-registry-packages"}},"0.0.0-20230422015719-7b64b527-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230422015719-7b64b527-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230422015719-7b64b527-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"4933d1448d4f1aa9d82fbcec935bd956fb2e0ce9","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230422015719-7b64b527-nightly.tgz","fileCount":152,"integrity":"sha512-wydxQPJW/9Y9Ki9PpA4tx3VA9qdSCmeGelJ4YugUbnnk1HYWi2py6KH3vkqgHlbi0DHiIdnmAGXIPc6IicSsUA==","signatures":[{"sig":"MEUCIQCJ0mZ3ZQwpH2r7QZ6nRZTayD5ALZPZ/n9WnAALQO1f6QIgW2BDC+OxPPQe4OMCu0qlEJ/Hp9zbVBsAE3KjxiaXbpQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230422015719-7b64b527-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":468554,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQz+cACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSHQ/9GLT6pJon5/0tbR2ZMa7LgZ5qiPimM7EaMPSDvb2PR2gW/DfJ\r\nTzmHPcLNOwdkXil4cpAh2jZ9+SyZO8TWCNLnmxaQvN7Ish8fhxuvf+g/nbl/\r\nP8o7yGOC3IMA6XH9nK9mx0E+bD2c02AWxj7Kxbqttrw8NRM9ZIeQhTNnDlh0\r\n5USZI95oM3dqlpmZw8NMVgJkMiDOxcsWSynQBd7QnJEv0IpVn5yPKNnW0i9Z\r\nGLVsqg2+4z0cIW47B0SqEOCOB97fBWxmA0Ij2StojHTB5+DvpyDyJz7lNVq7\r\niAo0tGqZxDjVcPahotGBg4zR0RKYJcKbtzFnYai5u0LQVNXz03ONtROEC1aJ\r\n4wHFGJtYFronQlk6PAtVoBK96/JOtUVmoB00LDa+SmSwNZIghCZ3HPGRBVJw\r\ngFfAOilehr/7XzMMGQQzRs+yN3Qf9jmOTJycQyv6geGzCoTFuAgVfQBQzI2V\r\nU/6syZkSuJW5y6soNeFYRq33ZKvg0Kaub0tsh9f4IDhOFHGOtNa9TqkvUltJ\r\nJ6klpeDZ8Zc7ln0ydsg61u401qdYj8chz1Z6cpecxfJcm8J9On+7qhNdLWrV\r\nO17+3PjBm3QSaeCDuRJX7zJ3bmwoqrNuC2l1FxNZ9d1A1R6cvbPIyqmbtD+B\r\ngiOh3PKtfg/YChzi7Y8nlpe4GN6/e4igA94=\r\n=4fog\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230422015719-7b64b527-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/3bb44403d7bf7dcc4e89b180312b0b94/blocksuite-virgo-0.0.0-20230422015719-7b64b527-nightly.tgz","_integrity":"sha512-wydxQPJW/9Y9Ki9PpA4tx3VA9qdSCmeGelJ4YugUbnnk1HYWi2py6KH3vkqgHlbi0DHiIdnmAGXIPc6IicSsUA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230422015719-7b64b527-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230422015719-7b64b527-nightly_1682128795837_0.692974999336871","host":"s3://npm-registry-packages"}},"0.5.0-alpha.4":{"name":"@blocksuite/virgo","version":"0.5.0-alpha.4","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0-alpha.4","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"dcd8a2030adde0b824a1f1d5d32989d550dc1975","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0-alpha.4.tgz","fileCount":152,"integrity":"sha512-jNBYN5BUXlwdagTufydOr51koPeoMFo47Pts5YC15RyvoNXRUVRzDVQsYgRP504ozYrG/1VsJjAUlsD7OgdXyA==","signatures":[{"sig":"MEUCICoF5gx16ayd6YIoRdos5apD3er8un1YVvBpV+Z8DLiRAiEAhXI1CFQxH5qatz5m2Lam+1MdJQ2eYMSPogcU7mluKKI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.5.0-alpha.4","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":468506,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQ0FvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9KhAAiE8QerVkdwxXClYq3q8eMOC1wMwFkdhokOL1kjNI8CKdpfqO\r\nPdtPT722AMXQ69iWwhSI5GdS8tyCYh5Tlr2KqbjGm4egTryXVLMY122iIUKJ\r\nwCiisVGvuX/FME8I6z+FGCovvx7+fVUuQ8YDKWVfhCCHAFgkw9cR9gzlY/bV\r\nUYaZ3FMLn6ci30g8uvp4lf2EbYkpbLVJmyOV7bw17NBvveizuTEn118PvGWw\r\nF4ht6t/iJ7qAysP5zE6w+L8WkpSy2dLBr0fsR3C86XGCCda5Glzb8UoQK1co\r\nD81Ql5TJGI6d8oDSD+eXR1/569KT71YvpnHxLOhMKuIdPQpXbKnYg6WUAxeF\r\njttN3BuxkoghsocyxJWH3+Tbe+ig3snH6kRKKBENqFrOicCt13ENJt0jtJRs\r\nwKPDRpfnQXO/VRMv4oCE1esS9zIbR9MoARANWtq41vgPZ1lTmt6tILdN8mJL\r\nPftGb7jp4zlRJeblyccSbhscnUBqE9tmhRkPI8shBqc+EKX/VknCGqfTGg1d\r\nuj7IGkicFgAADVq1eaLYGTDkAMEG54NvWFeuNMHb6TGfT38/VpIX12X7cQqQ\r\nqyBI7rnaYpYFeOSK8MWQueyxYUKDbz40+TASTteloQ0GJUl3PjVSzbu62R0l\r\ncFq91olkfR4d1JXkVfzgqnE7a+eH2gfERqc=\r\n=UN3/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0-alpha.4.tgz","types":"dist/index.d.ts","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/f7d05bc4f6cf6b4aaaf98345e174ef5f/blocksuite-virgo-0.5.0-alpha.4.tgz","_integrity":"sha512-jNBYN5BUXlwdagTufydOr51koPeoMFo47Pts5YC15RyvoNXRUVRzDVQsYgRP504ozYrG/1VsJjAUlsD7OgdXyA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.5.0-alpha.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0-alpha.4_1682129262696_0.9155532334334935","host":"s3://npm-registry-packages"}},"0.0.0-20230422231131-3de18e87-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230422231131-3de18e87-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230422231131-3de18e87-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"94353b79da50dbb2692a279949b6343a2c85d905","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230422231131-3de18e87-nightly.tgz","fileCount":152,"integrity":"sha512-YXcbn3jqadzr4EGYJac7fn2IUxIxkFoGXq13jYPmF65wMnsHFyJGPGWGwW63vNDmtoWRIGq3v1MAdCCXt1layA==","signatures":[{"sig":"MEYCIQDheIW4x5KmmIV2YulkQmuw+jOnDcRrMK9Ctk93ObWvVwIhAPQkEXbZMJF5PLCS51Y6dZAbp4ULqkFJeCRCuTG6Ss8D","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230422231131-3de18e87-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":468124,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRHsQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2zw//bLK0U+sC+xC1TAvYO6xUSA+ZihB4mrTEATKSpqu4xlnmdNBA\r\nDv1LRy2qlwjnFiA2FnDSVEBdHsv56v8TiLF/J9biZLkv0PZaTg1vRlOEuGZg\r\ndf5afnZs/sLspxKyYNvdbJyynegQYDUhUuKRy5mQk1rVEuG8lpkw2WFmT2Xp\r\nhkAUPXSiHxCdxaEyhKYVE8919844N+V+edQLFyEc7MOPtUMkNi9FCXlxi02h\r\nxnG7gVMhq2QUUF7UcRuJHQhQuStLB+FJE2wMGuKFzzSpfN0Xfg1lcZqgTxTz\r\nXJtvq33khauqyKSDi3H75ypz7BOAEQQZXByFyiL88HAKxYtpjZy3lYKGXro9\r\nbGGhWu6iBB9wpe2yMjV4rToIpUdQOku1ZTGnp1Sb2wZG8Z7iY3j6CvV74+4T\r\n1FLmjOy/Q2wKNJqddOHKEleTt1SByTQHtDDIdIc+slkx39ogwkSc24le7G38\r\nHAaEnCGRCRtZyr0iwtX5AcRhJNuKlAC/5RimB51M83mZI5SF7Z2BuHdPOdzV\r\nn1vzdn2gixDLGKiXtX65OzNHpNYfxrmaaB8pSEwEbMPZl0Ui7BwIqzENoCV9\r\nwWw1/NhnTABdxiXn01j4QDZEob09RyJAnG1AzjN0MnJXHrOp9qcwsALIEDvv\r\nw2+2y2ksFQBQ2QWIDtcOtfDhjYw+0l+MCqs=\r\n=IrO9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230422231131-3de18e87-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/05526d65c3e85e28d171d57f5c09aadf/blocksuite-virgo-0.0.0-20230422231131-3de18e87-nightly.tgz","_integrity":"sha512-YXcbn3jqadzr4EGYJac7fn2IUxIxkFoGXq13jYPmF65wMnsHFyJGPGWGwW63vNDmtoWRIGq3v1MAdCCXt1layA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230422231131-3de18e87-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230422231131-3de18e87-nightly_1682209551822_0.30161196804665824","host":"s3://npm-registry-packages"}},"0.0.0-20230423223855-b6c34d9e-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230423223855-b6c34d9e-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230423223855-b6c34d9e-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"41a1b921da428da75f97baf62872c156f044655e","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230423223855-b6c34d9e-nightly.tgz","fileCount":152,"integrity":"sha512-xXWZtHs/eHsTIJqlRw4AMpzEXrfiwA4EnzBN//bdpejT3VZ0IcRt+NxCe5YJdFTw34B2g/JJihmnWMvHhcVdKA==","signatures":[{"sig":"MEYCIQDEiaZ6AkXxN90QE0i4eQBTodhUwQR42bfZWJtY0z052wIhAMJqtwh+bPL+rwjKC+PQUcBRyyXWWhXEK4AWORglBimy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230423223855-b6c34d9e-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":473867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRcx2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmquDQ//ZwKpnjmH4bqgX885hsSk+NJGjFYbkrsfyGS4Vgd1kYldUM9d\r\nsG9IaacXKk+8S2az4M5LB0jHkLGcwAqP4ETGzYDot9dBFzPliNHM6y8JiG7m\r\nL42D0BKUgBZd029Q9zFEhZi+0SaaklYMFmd2VUbNChGXXUFTZWoF5gBi3Onf\r\ninUDdY1uNiZ5V6CB/tICM+duF95ySe8GUpcDl1xmRHpOZoHjQYhbFSHOiVnV\r\nNKMDa+n1gWkGv4bNQSliirNZP+astBEfCzUFac2UuNbgytyauq6QOQSg46dv\r\n5tIEFPtQcgRywWW+UU6UiWamwZEagICFAFKv0AizdxV+UCiAxY5QV4EZoJQp\r\nlDNHX4cwtjwy4/He9LFhMMTFhrRDRNg664ljWkc/tp6zDGoUjfjkv8ZWgYBp\r\n3LrCSE9QEingxT6Ku6Xy5pu8UY4rNF4eyP+TrOx/r/yOv5MyflXViT2YuKN7\r\n955M6wtK0ZbcYA8LtOQhEq0FZvcaLnFiDDaO0RxuhBZn6zfv6/FxijEPmAHV\r\n0kkKc049t0auBGNQL2ia1I2pyUzFZWxNO3ZIXrY0JiA/JMJuxF4IiaI4GF31\r\nqFl51UESsaZeSWggefrF19rz9bjh+wlbvnhIaaRr3L26GjZBuzyYV2K/I3+M\r\nMdbbAZPi3AJahagom4wureU+mK+dob6YIkk=\r\n=aoTi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230423223855-b6c34d9e-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/4a295d46e54f3fea7a2d68cd34d2f80e/blocksuite-virgo-0.0.0-20230423223855-b6c34d9e-nightly.tgz","_integrity":"sha512-xXWZtHs/eHsTIJqlRw4AMpzEXrfiwA4EnzBN//bdpejT3VZ0IcRt+NxCe5YJdFTw34B2g/JJihmnWMvHhcVdKA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230423223855-b6c34d9e-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230423223855-b6c34d9e-nightly_1682295926374_0.10698773953931551","host":"s3://npm-registry-packages"}},"0.0.0-20230424194949-ff9cc9dd-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230424194949-ff9cc9dd-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230424194949-ff9cc9dd-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"9667e2d4551339276aa5af1ded91e5dac6960056","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230424194949-ff9cc9dd-nightly.tgz","fileCount":152,"integrity":"sha512-ltw9VUL39w8ZC8HJ5gSBdBEufNoMnu5931UwdBXvbYlEcsduX6SvA8vNxjK5ZTlE5QSn/k1jQzAAt7wEyCDZPg==","signatures":[{"sig":"MEYCIQDMaMTR7pTVw45CD7inS/nZuOSnBCbJJ/C0TmS1wd6a4wIhAMobqWH0/VZ70VXqfX6C++PRhZvYITkc18p9gRbvjYzc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230424194949-ff9cc9dd-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":476610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRx2ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqhSg//aa1dF6fJWIEnK3vuoWRddZ7xQtvkSPTAAd5R6kzYh08hbjRh\r\nyurGDksiDP2QwPhFt9e0c6etS7JSxm2tk8sENlcoyHB89h6xZvsQbPcdFCqa\r\nMHXdjJB/CTfCLOjexELx+tvuWXltmLDgqJ/N1yjFkrDg0DwBHcUq5FPZ0jvq\r\n7rABWjAdvNhnpaSLaoYH8Ftoxi1Ayia07RUl+uVbz6EIQ1kpxay4yrmyKhna\r\nhFAdX8pOGYk0sNZpzrItBhFrYZ0xQOSzLV5Nm7jcKbTVbdphdIvkrzCuT9Nj\r\nLTsNTWJvAngmseNuSMK14rK4CKM+JMROTEa1GzgGX5Rbe8ZZtUSme4tdFJ76\r\nVpfh5iJ0MKfE9+00+qIL9pJiIgZhTaDc1+ZLknk8v0xm8VMZkdMwfhbv9J82\r\n1TEpkbpjoTKwjfT2nwhsqoo2jYveWfwN+/gFe+B9woFn+lNaU3NAR5n0hYYy\r\nTX6DigTTeLsZuwA+R7nDC0kovWvtM8WA/XAPJ3g+SEEzdIs+lAsMFVxmzSJ0\r\nR8wf6ssq0JIl/h4wHFOYbrRcYRKVDHruUg0MDndxZVLaaSnzBMcwQZjfiG3V\r\n+dz/3/bx1nzuneIdBgOqxqXdz7Ri9d0m+nR3xmLsauHncLLwJax355pr6fqA\r\nxwv8HI9gPyKW+dza7GAagohvJi6Ttwn/fhc=\r\n=D7L6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230424194949-ff9cc9dd-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segements, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor onlinet testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/9fa09470de1de85ecd068e8217b3f5cf/blocksuite-virgo-0.0.0-20230424194949-ff9cc9dd-nightly.tgz","_integrity":"sha512-ltw9VUL39w8ZC8HJ5gSBdBEufNoMnu5931UwdBXvbYlEcsduX6SvA8vNxjK5ZTlE5QSn/k1jQzAAt7wEyCDZPg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230424194949-ff9cc9dd-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230424194949-ff9cc9dd-nightly_1682382233375_0.16924944308652212","host":"s3://npm-registry-packages"}},"0.5.0":{"name":"@blocksuite/virgo","version":"0.5.0","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.5.0","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"d67ebe00bcee6d6f49475348c2339046002c77aa","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.5.0.tgz","fileCount":152,"integrity":"sha512-ZwT2CuibJ4Gmx+5lINh1yBZZbH83agbrkK8Gigmt/XDaqtV+1DEs8bqa/wFnw2FnMZ9njJrBi2/3bT+rUEIEwQ==","signatures":[{"sig":"MEUCIGqixsXz8Ahv094PuJb8oOxflcfAT423NYNuz4nDjR0hAiEAwDojXY5qeBC344ggzaFzesOkCeOY3Nuy4AvKVcjcrwk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.5.0","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":476520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSANqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoesRAAiq/h2ngoDF34lE5Rc/wkavXLh6Y9jCOADLNAe9z3K3VKY/cP\r\nsMS2cRhqT+d8lfBm9+dgYArmFW8fxUN49jtECDLCG3vG8ZJF50+Nhe08vlkp\r\nTXCWOhiBAw2T7+YadrCHejySEAmXHc4mPvIxOXRyz9lt9XSXlV+4Eo1IlKpp\r\ntGDtfNz5U/D0zJ4DmXb0qpRSceo87MjCPdkykHaHFZhi/pIfui/mH/CjA212\r\nD2aly5P/vC7p9O8220u6aOSMO9xTXP0fPoFAt2YNKaT4oA1VKulTdccnGiJU\r\n1il1XpZFYeZyF79dG9r2xhxJLNLHpE9NvTN0/l1sMALEZI0eK0YoTH/hs17l\r\npoWqBTH6Jpxr5wFFpW6JQK7A3jinsB0QCWkZgyTZPmspzcsbjmo2ou0SMTb3\r\n0V7YEOm43fLPwqP0mRGINSYOHhJYa7dqYbz1etED+BCSQ93dWuBRuKIg7hZ4\r\n5o3CE9osQSfaujVqWfvOZayaoHwCsPwbe8Ss4UnxKHE79qr+jiZyBF6IHzPI\r\ngX7RuK7i4HxFrj5V6OAmzAb2Scheyv8AHDGOtUzT/tWYQ1t8Rgs7LbO6rhME\r\ncwa66SKe+mQzXTO5zzlAk0lyp7VndenUZE96wPJII0Xh5UXby7Y+uvWOVTnV\r\n6EsjCeVmXNTZbJ37aIG8V41EM2dykAO1c18=\r\n=RvkX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.5.0.tgz","types":"dist/index.d.ts","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/6e84fc59aa06c76c422d138a67391e91/blocksuite-virgo-0.5.0.tgz","_integrity":"sha512-ZwT2CuibJ4Gmx+5lINh1yBZZbH83agbrkK8Gigmt/XDaqtV+1DEs8bqa/wFnw2FnMZ9njJrBi2/3bT+rUEIEwQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.5.0_1682441066537_0.5598876514394633","host":"s3://npm-registry-packages"}},"0.0.0-20230425164216-4b5fafd7-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230425164216-4b5fafd7-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230425164216-4b5fafd7-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"d84c164f5885924d6b8d9a36f5d3230f4e899e07","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230425164216-4b5fafd7-nightly.tgz","fileCount":152,"integrity":"sha512-nenvF2ZBR6NoyM5U/+xiWool/I5wbVM+yRY9RTEZwhdb71QHEbwr23s+iqS4mVm/E6F78LqQ+jbEsOvVdAGr0A==","signatures":[{"sig":"MEUCIQDGIkJRSngVnOhZmOGUQyzSb3Skd+SzgXGsXyGI1j8HDAIgaLLJR/DPRamqzFKorai6I13kWIbaqNTCWEPFk+C9E1g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230425164216-4b5fafd7-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":476584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSG8+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmru4A//eO9rosX65yZW7uOaM8cf7sXvBZsSI1tGbgmsPwREGZ8Bv0y0\r\ns7kG3NCeyegz2G0Sypcyp+slQ4SBEGOto6CjnCrddMLDM49XBDk+DkgIDM08\r\nG6rrk9z9EzQas/rwTB/OHpVcshlhjaAH4vyzlxwtiMB3TPMNeS1mFVJ5HnvS\r\nRcRpo7qooM/yKfY6+ahuSAk5ERX8KTzL/hmol7odnIqqmheUCYT8B27SIRmn\r\nS8D0yxESgV8ipxxj8Xzg62lx179f0enSyQXQcdzEVN7ywF41ZxLmvFbDdz+p\r\nVoeEGdib/4PfijCrbzlHpy1eV6iEyZIS+VQwGcsYKm478UGrz72rPtkQoIAN\r\noaGTf5g9jNGINisR5hffc6wNnuzqcBdM7h9XMvTF6xb1BCMe8M+nlH/of4A4\r\nSVqRvZQOGoJv3IXTet32JXl1+gRPXpMvso1mywH4malwqzLAAPN5FXTi15lW\r\n8Cd/f1ca2PpOpgyIWo5AbLIKP4q5nv6wfC2Q1ufBtuYMir51jxAuNG/33zo0\r\nJUvwNdRaXkBnBsHabnZgvmEip4HP7oEjTLadJg2AGUnFP7IrAHpNi3WitKEX\r\nLuPrmyp5WC4rvyOgTucjbh0MBi2Yj1WUDy8liPhqiEETHO5VsApjpxoBwrDl\r\nKhaRMPiw22jwzqrcJF4NHzy/pvHM9ybSouc=\r\n=vO0c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230425164216-4b5fafd7-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/aa0346abdb5c628a880c9609ddd9b10b/blocksuite-virgo-0.0.0-20230425164216-4b5fafd7-nightly.tgz","_integrity":"sha512-nenvF2ZBR6NoyM5U/+xiWool/I5wbVM+yRY9RTEZwhdb71QHEbwr23s+iqS4mVm/E6F78LqQ+jbEsOvVdAGr0A==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230425164216-4b5fafd7-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.6.1","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230425164216-4b5fafd7-nightly_1682468669566_0.7971844798040892","host":"s3://npm-registry-packages"}},"0.0.0-20230426054154-cbe3dbce-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230426054154-cbe3dbce-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230426054154-cbe3dbce-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"fce71643fb6b304fe1a41dd1a9f50da101e37d2c","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230426054154-cbe3dbce-nightly.tgz","fileCount":152,"integrity":"sha512-F0vtkuR/UrpM5nzPLKmqaPv0PpkJCJ3hBTPvYldJt97b1UKGhqElXLeR45J0wSpe24rXW+v8aBkMVKUiDAa3Hg==","signatures":[{"sig":"MEUCIB0jOiUkwpAs5shIMVOrmY1+qVwVq9IP3r/R5umHcrXaAiEAlg00IhpTZPTKYLyxaNVGkDn3o8MXgK3xwW/PJr7vkmA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230426054154-cbe3dbce-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":476845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSMUkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmppEg//Veb0ac5XT+iglcEr8ukyQ+rtsf/wtf7Um34JW52SfBf0JcX2\r\nqOpZ1NwaaLoeJ6vz7SY4W413KMHeHavNkkjXGUko9ApWLYNdOY9c+9enqvjC\r\nYZUoxyZhPQXms2rGg+s9o2160N47aN/SJkaMzdTYAuZSTUh75IC4fSNw220P\r\nq8uHmzhCKmt8Ll+mvwBLwt9GrigVF29CtDGOlCuODm0uxeznNekn++6I2mtv\r\ntUHcQOqrZFyx8TIW25y1wg+td720Pa8IDqh5F4qwnI7IE6qrrQcmzD8Iytcz\r\nkoZ4kGX6VeeL8NCMGQHIVn+6aPD5aD0QTenW4ce4PwTDiS6i5jMy/On+7AY7\r\nf0VMPh7Pl4oGkV31TuVGYzzz0HLyBfSEmUu9Liom9HYDovwYyQMJbzSsqJT4\r\nY5tOyYCvhsP87mUQKMThZDF6ktdIYtZ5egKr/jBGZxzO482a+LkMxdwfbvcq\r\nhZA4leZh+BrrKQWQ5MmWF3s9mOZKxjhHn3auVWttru9VQLbZw17VX79B5dsN\r\nhLYtif+Qh/IQxcU4ibJ1K+wijSRk4IA85Oa7w3kPf6J+m+/qzcthvxNxx5A5\r\nCsJrQdXCn3CWeIVwIkLhtrU3vecUVmPjACSAkc6rO1xKw92d+BRZFfnLh0TV\r\nx2N6GuSqdvibIyj3WUdPZkTgRmWWLx90gGM=\r\n=+Z/X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230426054154-cbe3dbce-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/2a56e3e373dd7856d7227a40a41843f9/blocksuite-virgo-0.0.0-20230426054154-cbe3dbce-nightly.tgz","_integrity":"sha512-F0vtkuR/UrpM5nzPLKmqaPv0PpkJCJ3hBTPvYldJt97b1UKGhqElXLeR45J0wSpe24rXW+v8aBkMVKUiDAa3Hg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230426054154-cbe3dbce-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.2","yjs":"^13.5.50"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230426054154-cbe3dbce-nightly_1682490660180_0.7240519213525793","host":"s3://npm-registry-packages"}},"0.0.0-20230426131617-7a934ba6-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230426131617-7a934ba6-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230426131617-7a934ba6-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"a9316995d0141a3150e675405d519e14aa78d2e1","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230426131617-7a934ba6-nightly.tgz","fileCount":152,"integrity":"sha512-BkRzwTvSMHpSTYA0vCIkt5JFUzHlsB/8g9xpVWeu59/+5b1z+I3J6G7SG+YwDzfRxpctr7UuFSAuw9whrH4EIQ==","signatures":[{"sig":"MEUCID/ui/12y3xWM9ycolOL/K3z2Rm4DQ+10mhcSyVRg+ihAiEAxWWnY7ADLr+w7dqs7Eh4auVjzlVGiqs7WRtZ8TZ237c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230426131617-7a934ba6-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":479775,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkScExACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq4qA//bR6VjZPjlH2r7V2HXm9p7TcvkRFQKbYmiktxGIN2T68IHlox\r\n5DUpTb8j9lLJh/H03R8bsH3EIZAJMVUzfuibKeNZ+YwTTsi5CWuP8lD/Z2cb\r\nFwy3B5EEWtNPyJcXZuOWSNc2yfsQ3A2aBAXDUR17XzIJ0VsSfFxnTOeCgjle\r\n0rIMhYoF4mBG0ewbARveQ5+5ytPcCdzavAmfSnaYPD1d1G/6KNQMKePKHfV5\r\nYfrJx+k/MnqlgQ1+RCuntNf2FkxRjqBvStXkm614Pbj/ZoO25dSMedo332DY\r\nhCMW1QYC99W4aPWu/f735PrlZaNYhd2cpKsSNsqQB+Vf9Ul6LNaP7p07q8ni\r\n2hZxHf+xqPAEK/kXZ71IlmSwOJ4Cq/Qoc/vaYzGlnthzIHiAkCnQJQk3bARW\r\nyzIu+hC8Oe3gmNoqqQ7kYGDLtvDtiPaIFo2T50FWL/bo2Eavl7DBBJOqq2B7\r\noFkjaubzHMhtJRKmt760oSgoWi3SwlRS92yLmoXMCBwQ2fL7ezREy/J8Pjro\r\nPwZ0I0XQsFWBTSVUeumCWEHuWLw+/Bmfeoq819YTGQWutp3E1NEB36Uz0M6z\r\nEzxtlfY5m5A5UbgTEvmXjBRS9jZ40rJg0ZJD0MGzLgfV4e9hiUxXLmhQrqte\r\nxtAQz8PLvJp4T51paIxN1WKJUMQaaUDDi/o=\r\n=RxHG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230426131617-7a934ba6-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/89b858ed7cf81b792f9580fb231fa82a/blocksuite-virgo-0.0.0-20230426131617-7a934ba6-nightly.tgz","_integrity":"sha512-BkRzwTvSMHpSTYA0vCIkt5JFUzHlsB/8g9xpVWeu59/+5b1z+I3J6G7SG+YwDzfRxpctr7UuFSAuw9whrH4EIQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230426131617-7a934ba6-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.2","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230426131617-7a934ba6-nightly_1682555184495_0.09260854316776035","host":"s3://npm-registry-packages"}},"0.0.0-20230427041825-7fff957d-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230427041825-7fff957d-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230427041825-7fff957d-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"c86e593099d97f26855f25c4c8b49d816eb8b785","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230427041825-7fff957d-nightly.tgz","fileCount":152,"integrity":"sha512-5IKgRMYVIQJcmm+dxGGUXMeuOa5yhYE/WWzsCMWmWdeCzMglkDQ3xPMtQ4DYsCaK+b0wSsoMOpC15fNSAKQKLw==","signatures":[{"sig":"MEQCIBGydOpoaGTFkGh/nuV1uhi/csUNJ6SYEI8l2ycbqBXsAiAMjeOL3e01B0svrNtKU/1f5Ig01/3WnwsptdxU+VY51g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230427041825-7fff957d-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":479797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSfuLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoHfg/9G7uegptgtp5++7Tv/SXgAbucWqmuhcHzGBOw9Ip+RZv17hlP\r\niQ405wc8O6xSO5Si1l7rIxtxHKcC1kzrirJ9lIEvxE9XGXiQo/8RBbAVwDII\r\nCKlTvS5vOMFnIxzY5l3LIsluGKsXp0yVOQXhaJwcVP4OYoswhjNM6OIA1hpw\r\nLp4ZnSYx8ZWIDJAp1j0Oe3xcpcj6U4+kqoACsL8jS3GLWrlXeUqJXFbq2DRv\r\n77Ye8s2rPciAbPCodc3ACmgWe2FsWruW1cdImQ/mlJl9dBHWb8tT2Vwro7gw\r\nuTRSp3v3JQ0M6L16UUcsAiFTtW3Vfvq3tYm6142JxxjGulK0VHcKT4xTALGi\r\nGKUAordcYydIKyX0hpNEmABVTsb3jvyqP7rJdxW0vD6c8OoWD0Hh589peIgx\r\na7rYh2oR7KZXK0pfAqAlpWqvlfxwXV/wsgOC5w9cZ7OnIZaC5FaBURG5r3Vy\r\nSJT74k+hwbUg/cciCJ7t3sLHlMqb23eaCOSap/llbcwe5khCWl7RmZ5q49Q6\r\n118lLJgPKNN0AgFu5PZqtLQ5U6CkOFfCTAOLUFQrMbIQaMj9rmFKfgPE1fT6\r\nhbL6eMrky5NArGqeH4nyTo4VX9Sfa27U3jPXknM7/q4Ffyr5ZLvHtQ/vPr3Y\r\nGspWxpdS/Xt1zBGrMPXyHAEfcOGY+RXTHJk=\r\n=1i/b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230427041825-7fff957d-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/9335da63dc1d1959033aced04035cc39/blocksuite-virgo-0.0.0-20230427041825-7fff957d-nightly.tgz","_integrity":"sha512-5IKgRMYVIQJcmm+dxGGUXMeuOa5yhYE/WWzsCMWmWdeCzMglkDQ3xPMtQ4DYsCaK+b0wSsoMOpC15fNSAKQKLw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230427041825-7fff957d-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.2","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230427041825-7fff957d-nightly_1682570122655_0.6174129675054436","host":"s3://npm-registry-packages"}},"0.0.0-20230427114705-ffcc5be0-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230427114705-ffcc5be0-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230427114705-ffcc5be0-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"97ee03c245daec6e47bc2dde4c082472d8653490","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230427114705-ffcc5be0-nightly.tgz","fileCount":152,"integrity":"sha512-0IJo6NFrfhnb5K7YQ4mJWOUCmyxBmtCzE3/Zqrz2hj3k4eT8V+9iKd8K2lC+90TzunLXmPoLO47HwIW/i+MQjQ==","signatures":[{"sig":"MEYCIQDYD+SgjyjjUEF/9yZAoiyo2Pd3wgw5WJHJ6kOWadeQfwIhAMOoG3WpNpQtVx+GVhqGexASw9RR3cVRJ4nmAcMCFrMx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230427114705-ffcc5be0-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":479793,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSxKAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqiyw/7B3RhfBtudN3vnYbys91hz6lcSfwMgUit6ohsIXDTJtH3d6/W\r\nxfCl0mcAZLOdjtxWgCz2bYYjiJJWtdxoXVppAh0swxdk6vqzbOzvjtqjVQ0+\r\n5yFf+IS59jweD+9W1qvWTOFD1HhI7OosGrPO20lfKl7LQaD6jcAJ9Xlc8IXv\r\nzQf+OSf2afmFz9KRkVef2WnjELMI0nOBNoPiuDo/r2UOtZpW02ENacXChC8h\r\noLxvU3/zNfg6B+odEeQQNjARWFit77o9W9AWpReqk5z5Rh/OSxHoSPFJ8ac5\r\n3DLVYh5xiap0lt0vnIUl/OZZh17Q+JfEEe8inikQeE2f2OGOBDNFZw47HvwU\r\nX7QD/XPypZ0ncU9pdNnPxJ/VX8Gw9d4n+efy9qTnJts6VN3W8MnSl3AyEx43\r\nE0uJ2oU10H8THR5Wm/WwEN+FCBLj0PGMphXZoeRMw0yUsBqIdTUsx/kkb8fu\r\n0RZfnR4rtOWk63Xb5/u5uVoVtH0yR+w8hbYxr/iOOXxf0t1R/9ekrA1BI/G3\r\n2mbU/DS9zJ0udm7pzne/FV6vNpoU9e68OVf9Pxq8FJfXSlRXiTfjXYqy4UhG\r\na8cDM5mG8FImHeapPkTIuboc2+7MDnUXbQi15F4XGvfPfJUncY3+iIDlUr7H\r\njjqYWfdf7tF2OCyhmfg0l9NPCbDo8qIzNi8=\r\n=CSw1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230427114705-ffcc5be0-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/800e30b426c4bf595736e56730a7664b/blocksuite-virgo-0.0.0-20230427114705-ffcc5be0-nightly.tgz","_integrity":"sha512-0IJo6NFrfhnb5K7YQ4mJWOUCmyxBmtCzE3/Zqrz2hj3k4eT8V+9iKd8K2lC+90TzunLXmPoLO47HwIW/i+MQjQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230427114705-ffcc5be0-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.2","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230427114705-ffcc5be0-nightly_1682641535977_0.6617223348836883","host":"s3://npm-registry-packages"}},"0.0.0-20230428070346-4bed88f0-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230428070346-4bed88f0-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230428070346-4bed88f0-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"bdb9fe48bb9d2e750f8277dab0ff58fa5f7f491f","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230428070346-4bed88f0-nightly.tgz","fileCount":152,"integrity":"sha512-9lTjcrBO+OX1s+vsyz2DkV6b/GtyIcjXDTo4jsH+L9P/YSygGW37tOJP71eU16t0/mT6O/bl99Pi2zqVs2uQkw==","signatures":[{"sig":"MEUCIQCRGB1TQfOwLsIsLkKfL4nqEHmVkhGrpcOhC9JRAYF6swIgLMpPbyvkoaO6hIr/FY+qTsocHDLSpKh1n9aNrQyLCLc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230428070346-4bed88f0-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":479793,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkS3DbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1tBAAieTan2sfKVmnMydTemcNHHaKYbdC6A9U1nsusuKbbWcRyKWz\r\ncY+yn5HAAbLwsgaSJDUyYOwCQOou05hlgUV00iHAtKpKuq6ioIoimv2My8St\r\n7zpDYj3FIQhf3nmSjFUATeBHrIRxs8ri7nfKc96AfTkm22/EcRpkPx76GnBs\r\nAqp6rgWn7ZdNdf3oLuDBp0KSBdaZ9977cLs37OFCLO2EOolUDeU8ceXKWF40\r\npVOWJvy5rmW6RedmpyP5sSBwawC0muYkFeBP73p82ESXjaqVRyd0pSD9dn/X\r\nS1rcnZnBmHHPrXRWmHWNcsiTZjDlxZh3mUHGhdxX7B4I49mei8QU2ix7SIDj\r\nzRo3oQtTNPp32k1qC3rlJRYz3c20Mj0imJVUBjnUfpZG5ROUe2CrLa28HBi7\r\n1pDGWqGvUb2I+Y3Xb97uDycfzAJl3FMevCiysPI2rH+EzX9iUfubo0DlOEqK\r\naXXISCp3LGtY4k+8zziwFMKUo3oc4DuSo1w4yhGXu/vuIZesDTNVUzZhJpEx\r\nnisWK7fxwFJzdpnwCQSSoujAyR5N8ohchHxYbDPo8Y5A7ozi4kySo/AEsD4d\r\n16GXj5HkakGaF+beXalndTLjmDR/iS+wUHjlx8CBd5vNXzYGUth6LKEYaTQz\r\nXomRdGM3zwqNRRTYceQ68vyM13MQp+/QF8k=\r\n=98ja\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230428070346-4bed88f0-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/9e3b71735b0beb8d2f85ae2e19d495a8/blocksuite-virgo-0.0.0-20230428070346-4bed88f0-nightly.tgz","_integrity":"sha512-9lTjcrBO+OX1s+vsyz2DkV6b/GtyIcjXDTo4jsH+L9P/YSygGW37tOJP71eU16t0/mT6O/bl99Pi2zqVs2uQkw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230428070346-4bed88f0-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.2","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230428070346-4bed88f0-nightly_1682665690864_0.49067827291534716","host":"s3://npm-registry-packages"}},"0.0.0-20230428133133-9f290178-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230428133133-9f290178-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230428133133-9f290178-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"67bdeb8e23eb8440e0b8b5fe984d62cd69e42e1a","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230428133133-9f290178-nightly.tgz","fileCount":152,"integrity":"sha512-WgELVKsOi76SavhHFad+4MGdaAySgODQY5k5yfI/G9npfNP4QIqFRxILEEiUF3dfCkih+oSITyTDh+Qrbu0VTQ==","signatures":[{"sig":"MEYCIQDA4hyhIrOfnYo9gtokXoDuyJUwULhWbv9+nkh0VnIHhwIhAOY9PIgPMJZ6w5sdyYdHvurs7HwMIiruA8d/4mmh2NzI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230428133133-9f290178-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":479793,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGN+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqyKg//f/LJm+VQPR9cpX6Y9RBBMg1E01CXxuKLJeH7VC1iyLxKBPoa\r\n/CSYxAMUP9tRCTvMdS3Mw+UcwVyS1xDdNPZK9Ei/C/205F9lrm7F3fqB+bgj\r\ndsrpSgm7RDIHCAKGcKFRrORF6WDwdzsPB7i7GdJbv/BAcvfsnFQHYaNjGgkx\r\n4bGQCf832byBcV0yC6ZoNnGQXi2S0X+9URjvLKM3bqsXmeQBAedhRGq45ZBq\r\nKJ+ZIsOu3noTMJfusngNxtnOB8PH0fIj5ZQILRuylKj/R8o0G5d3lQt6Q85d\r\n9V6O6cI1WeHsuSfF7+7bnX4Q6qPea3zNU6bxVUaXpMNmdBUuDOy2h1zjrMWM\r\nsyqdanBHn6jijG8a4HjgNcHczg4a98L5OcsyMHEtjAogXwjw8IGa3McAw1Vd\r\njkaNyWfQ25vRU8B0lqTHEyRayiPygf0OEuutYF3JnQWGr7kzjPX5agaovfJf\r\nTipUY8GhkHjqf4zuwJiaHs08HXK0D9VK9r2cG5DhzPoEOX/h0qr8XMycB4bK\r\nVfcHIDEjevdsyE4l4OB1Lzo2iU8M807yGZ/RBgTVzhEnriavFI3uGzJPcyr0\r\nh8P+3PPaqUieY7dgvFafb/sVFZax84c4qk8mR75D4MrT4ywLvwwD43EDE0OH\r\n213r2LQH3uMYgis8CcZWaUghh35JB6azo1s=\r\n=N9YQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230428133133-9f290178-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/e457e807cb5f1e3429560c96772aa4f0/blocksuite-virgo-0.0.0-20230428133133-9f290178-nightly.tgz","_integrity":"sha512-WgELVKsOi76SavhHFad+4MGdaAySgODQY5k5yfI/G9npfNP4QIqFRxILEEiUF3dfCkih+oSITyTDh+Qrbu0VTQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230428133133-9f290178-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.2","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230428133133-9f290178-nightly_1682727806228_0.7155349267597724","host":"s3://npm-registry-packages"}},"0.0.0-20230429153208-4ac043ec-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230429153208-4ac043ec-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230429153208-4ac043ec-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"ad5f5ed3a4f73d65efb310683a44bbc295f4ece2","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230429153208-4ac043ec-nightly.tgz","fileCount":152,"integrity":"sha512-1IfNzEdRGPhhZtMyFHB6noSuDntqLG9beBnfZhBzc6Tjlic6QnM8rFbHWlr8ChvzjpDdwafHE/MmZQ94b1sf3Q==","signatures":[{"sig":"MEUCIQCdL8JhOK1gwAaRkgLQIEx2FKcMDX45F+MqF5MZ9qUwFgIgVUy2C92xMmqDiO3YNyVq+oXtun33aBR7CQ5BL07U9Sk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230429153208-4ac043ec-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":479789,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTbW7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmonzg//RdJXS2WM6YUhjxIGcEqyWZVtLX1HJXHRUBN6qWaODj66jCJ6\r\nYKFDZpBg3cqhiB/ZQHkQzOdM1GePo66BZSbjAk2T8UGc94TRa2x3chXaJBVl\r\n4TGDQzjTCd0mjdstrjE/gAWTplWdyMWluz5hm3p4hPnmwRD18O9JSfp07694\r\n5501R5T1WSn0PvuJ2urGfD9/w+/bDow4kJ6cFuziw4ziAApZY/TOodF6xL3R\r\nmYnCQXyZBGXCNAhs8NKFJQynQqf4Cq69NBMRkxHoYHhukILSW1jllR9sgp0U\r\nvYbNBRI10X2YNqXk6Rm3GWI7N9X9EB7UKma4J80Kc6NlW/j46rUMahwA8Jw7\r\nKTrE1RZx+C3uXop20Tyu+IbG9DJspFF+82eHDUHiUJxZfPEiq9UOx4wRRMAo\r\not1/dXOTx2/Zj18ecFsB5thVZ9GnTnC7vYOBoxh8zB7GyjTJZQr3yBvCAJJQ\r\nwhTxxBEytGUluCDDbs77EtExqH8vAxGKDIwzrv3bFvWL4YGXoQTzeWwbwiu8\r\n6URM6pKsnFSNEbYOkFlKOX3Cw7uzHHT5q13IYHxyFndTIIWk3a9QjcOP60xg\r\nYupJLwvZmAnJVhBdEs+rps9keZkZxxpxqvZPTKLgrL7Glh2YXW0cG7QRW1R0\r\nDlGvm/08qb5zlzIyHV2B7DKPN+dXWf+oisY=\r\n=NUhL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230429153208-4ac043ec-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/a8ccdd350e2d2fa41ebe6bb7c1a2ad84/blocksuite-virgo-0.0.0-20230429153208-4ac043ec-nightly.tgz","_integrity":"sha512-1IfNzEdRGPhhZtMyFHB6noSuDntqLG9beBnfZhBzc6Tjlic6QnM8rFbHWlr8ChvzjpDdwafHE/MmZQ94b1sf3Q==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230429153208-4ac043ec-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.2","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230429153208-4ac043ec-nightly_1682814395344_0.2872638998189798","host":"s3://npm-registry-packages"}},"0.0.0-20230430074810-e05a7cd0-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230430074810-e05a7cd0-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230430074810-e05a7cd0-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"4f3039d1d3f14d3cd7e588f7cf1b208530c9a11e","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230430074810-e05a7cd0-nightly.tgz","fileCount":152,"integrity":"sha512-ShudjWkFeBIjELSBKd47HLCzLCjXeEia3nA/m8SGSYzRVjYHSbIU1IMkvuLcS5Y9vpZuB0hO1xltEBgoAHVWWQ==","signatures":[{"sig":"MEYCIQDcCK1JsqYnZkzS27xwy4UF6coRpFHsN4QJ6myv8FqeTwIhAPZ3vRY6jyrBduPpalAwgMHnBPaVqS5Sz5UtEn3gK8xw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230430074810-e05a7cd0-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":479789,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTwcBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoYog/+Puqs59qmnY3eMBx/dEzoOKaZzTPubRcwXKhtkZYi+AQT5t96\r\n5ngETpyMBOL+dsDYIxyci0HgJQ47Dk/d2Vjdhm4n3MVzqNjWkelxI03E/XIU\r\npHjtKd/3mkJ+yLppvzvdE7SmAcPQE2yHuAStz5kBU9mSI1vw8T1e8gNfHaDu\r\nG8MYmTgJSX9YmFQVNsrfLy4jhGfsPmdX9fO2eSWo8HtkLpmWuWTf1pzHEhrI\r\nB4eW97ucVYyKhUZbuX8NrFIe0MsTHZcxd//jQbCMgmOok6Eb9QycUzC5JNLw\r\nYT9wfAOI8GScfuEJAQDxSscjbMtucq379YkdGFWwTeWNx9XRkDnB61XdHXUI\r\n7xwPUTiD8pmevD6O+uil9rspdb4STKaBwuWX3cVbOX+XJV2yscnulmZ+mYOu\r\n/8OrlhiDLqB89SvSqNqhneF+cljGduUZWpSz3zLW9SIQZjJ3xm/VOJhb39wI\r\nVIVTkiohhMXt40xnE9xeRgZWu+0FzhwEa9d8ZDvH6dM5jMtDAVeq9gSQYx5C\r\nwOdeK7+70kAEEJ0LUKCGtbGak4ClELnpRwoDdPlRqLsDHY5gTJsgwaq50DYc\r\nGQ7maY2cm54FFWYkcx3Ambo6dWl92M97jRvybfLaqNp6rji2k1pMJZ3QjrRY\r\n2AVZhT30pKSbziASKTVsssMeHfoIMNwXwj8=\r\n=9IDA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230430074810-e05a7cd0-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/dad22eeab0e28f9453019725ce52bf9c/blocksuite-virgo-0.0.0-20230430074810-e05a7cd0-nightly.tgz","_integrity":"sha512-ShudjWkFeBIjELSBKd47HLCzLCjXeEia3nA/m8SGSYzRVjYHSbIU1IMkvuLcS5Y9vpZuB0hO1xltEBgoAHVWWQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230430074810-e05a7cd0-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.2","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230430074810-e05a7cd0-nightly_1682900736716_0.2599949434703417","host":"s3://npm-registry-packages"}},"0.0.0-20230501021333-90d9a4af-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230501021333-90d9a4af-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230501021333-90d9a4af-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"5ecff15f2999d9779745306b3c734899a33f673d","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230501021333-90d9a4af-nightly.tgz","fileCount":152,"integrity":"sha512-wBhiAZkiG8uqsf7grnHrGGJhcP7/yzAH8M3TwuxcfG34uU2Y94U7289Q7fEb5G2RADy07r8zWHKLywz4gPb+Gw==","signatures":[{"sig":"MEQCIBPz2pbYaFOOmJ5ZEMv1iW5g2ho3pj9zxceA0k+b2cYKAiB2TTnL2t2WF+z/0fqLlHoRV+WyopKls8IvBQys6sLcbg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230501021333-90d9a4af-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":479789,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUFgNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrz/Q/9GRY2R7rlj3pcj5FynOiauix46nWSDoT7XtPSd6kNDQM2XOSP\r\nNwVCQ/vD5mX1PPsM+jzksxdL7tWtd+nXkUaq6wh772dc8o0zsabHnmChk3um\r\ndP5cF3ye6F7yxNg5mvu0SY/HkpHO5HTd7FMAGqN+g3HiX8q2qsz89WT547qh\r\nuNAZc4KQGQOl0lFiZXS1Z9wMooiYSqgDt1giQhV5lsi7wQV1vUnjXfwTPdRm\r\nubVKXpJYZao5KgCAUReX65f2UWpzV+MrbNMrWYX7rg12a2ZgUHSFby9bgGgO\r\neM4sDbFfurnrAkRUCEwKB5OmsWaqRbLzw9S8cgzkC/jK0H8U0MmbZ2p578j1\r\n2qz/nncIGIKYKu+EFVM3BU0d+aNPU7BrSPRywyGvh/JbCzx0qTDVFu+ceWXj\r\nj1inhmM9lBBkdhmWOX27ybG3wY5AsKhfyl8ck2U0i3z7J8jNXoXZIckxv8VY\r\nOfXc3J94AcUs4F+q5AFxoA5qENt68GBKuGwjhco5cu0iZXGlNJWQuS03nLUf\r\n+RXp41gu/Li20ac0H1fwpVYPQP1gk1U5nluzabtw5cc7qphkG99r+6lx8LVm\r\nhWb5fT+xTXYykB3zu0s0y46twO2AWll46VX8LY/inSnbotkhV1fsr5kG3Jse\r\nRXPWY82T9OK8S/2Ja5qe+Vns9DYZWFW9qWE=\r\n=puSu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230501021333-90d9a4af-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/84b5cc0c9c171615248927753bf7265e/blocksuite-virgo-0.0.0-20230501021333-90d9a4af-nightly.tgz","_integrity":"sha512-wBhiAZkiG8uqsf7grnHrGGJhcP7/yzAH8M3TwuxcfG34uU2Y94U7289Q7fEb5G2RADy07r8zWHKLywz4gPb+Gw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230501021333-90d9a4af-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.2","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230501021333-90d9a4af-nightly_1682987020568_0.16976350671068552","host":"s3://npm-registry-packages"}},"0.0.0-20230502232311-bfe52748-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230502232311-bfe52748-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230502232311-bfe52748-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"e1846f9436eb82f2911476dbfadb9205cb3722f4","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230502232311-bfe52748-nightly.tgz","fileCount":152,"integrity":"sha512-iLOBFlZaJCaH8xg+ap57eg/z5Jg937oXgXaq1rFtUQ2qhydg1s2ox2kWmynlIHQzXBrGwe8O2zHKSmG9Lo7oWQ==","signatures":[{"sig":"MEUCIQDx7Z/Ki3wsHnrRfPSH4sYZ3N0olQ4Vo2V/k9xAEfH9+QIgbIT1+g29HFPwME50ZQgN7uRSbCjZuc0Tvgbt/RStRHU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230502232311-bfe52748-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":477828,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUal7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp8NA/+Iu1eHUebrGt8RcjCo47QJkOniD5fSK6Xbsoo1GN0U0EGrDlA\r\n708+8K5TfB1Urx5++ADOFqNhUTTa0u81b/cv7cJHT45pz2bK5eKUKpyRWe69\r\nv1qs8WbJz91tIgBNc5PpXaemW4Z2tlSluXEyD/xM569RcetW28JAIRbwTTkf\r\noHeOb5hmp2JlxLAFaNJ0xfREACX/MKxlIw/A1XFsGyUbZKGehymWPtRKOYPl\r\nz8Q3vztReTHaMxGcAOj4ZLnoFVSaUh/ygApsYiD+maHA9hOSNkwM3joqpKzp\r\nqRsa6SHeRFYp6G/t+DBdshZsXJhggcfNYvFoICd0gJ0AwKhIi+dNuxgfKZqD\r\nbQGprrgFkMyoyOZqmqNHVo3uPi4piT5iyg0PA4Pt8Un0dqrnJZKlrFqf/SlJ\r\nhHXthbhKAW/lolj46HeaezKmuOGBB4gLpYhL6zgLk/zU7krOCCectIdKSyAK\r\npKUaAm5hUZWKJstzfC5zTwDfsxhBAPkwPMXwy6p7Auhr+H32Ir4vNWJqzbGM\r\n7yLwvAfpkxc/QG4cJJkO3TV+n6jntN3PmRQ7NBlq+rOHPdryhkFieiAHFiyE\r\neHYVEVLU0iILiO6p2VmRVN0VmTeynXUcuqcD6Utwi2cAZ9qf/mIq52yTcrUs\r\nf0J8KszyqVnmo/5iY26gP2NR4IryqKz389w=\r\n=hbFR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230502232311-bfe52748-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/c547c57a8da47611a0922da83ae3b615/blocksuite-virgo-0.0.0-20230502232311-bfe52748-nightly.tgz","_integrity":"sha512-iLOBFlZaJCaH8xg+ap57eg/z5Jg937oXgXaq1rFtUQ2qhydg1s2ox2kWmynlIHQzXBrGwe8O2zHKSmG9Lo7oWQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230502232311-bfe52748-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.2","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230502232311-bfe52748-nightly_1683073403438_0.36445854016147794","host":"s3://npm-registry-packages"}},"0.0.0-20230503040956-5c49643f-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230503040956-5c49643f-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230503040956-5c49643f-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"dcd15094dc7d6cc2d21cc4496fe8d0e687ffef88","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230503040956-5c49643f-nightly.tgz","fileCount":152,"integrity":"sha512-OjwTBKHrw+pUGMjqGTDoEZigZy0QFvLiNWHGw16K3qWf3/ANpYvV1c7hjb1LD//lRg+ZN0szcPXMuObZCX6jiQ==","signatures":[{"sig":"MEUCIQDU3ulse//up++yHKCtjbht3fQX0I41Ms8deEgPlFoHHwIgNa90QyCLtDYde46wfjgB4+ZPOPa7aA76zuiPUMUnwg0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230503040956-5c49643f-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":477828,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUvsZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqqjBAAnqb+Jk9HKkoSVMogbeOFzMJE6mf5uMuCG2ka7ggOKb6RAxKv\r\nPVFQgpX/OzEO0I1q25yiI/jnsCztvv19REoMRfiCKNr3mxY2JRoXyVwlPIlP\r\nVNIECaQFlUCiSkF9X5HoPdUrBQdPu6a5n/ICLh86Ib7RdNcnXfb07ZaWhtpq\r\niqeEvQsAClnFiW3zeGLivlUGZZsvTdXVf2K5D0ugBFV9yPSIXH5nelDWecjx\r\nu6GSg0F45J1osIHVnfScf9Jn0C46M9iCOLq0SoeRPVcpYMdCvA7KOtACy1Gd\r\nESUO0Msl0gwFY1dvSRa3P9Qsa6s0VLqoeW1YzjzrZPE0twqPeGhWdLLSVNCr\r\n/ob78CtJpKD5XVqwDVQyOtJUaj4p3W16J9lITxlWTKeFry4YYfV+S2kCP6jo\r\n/C+m/sCjlyXEnCjJJe71u1LkFmnIVLOPmw0iKaFOKgqffuGRTWjN4IeTlRwa\r\nkr8m1Vtdfh69TRgvzEJEKXuTpfGRMi7kKdKTkHLQQHb1b4ogm3pR7J+zI85t\r\nmOrGdIb51jQiSU05v/IrQ7DBWGIgFGiJ+e5/v6sqyCC5ZECPoM8u9FmhUZJo\r\nWk0DiuFdy+q4502I8qjhq1d75FIi5KX5VJZCDw27z5kmqXwDgimlcuiD/5hu\r\nt86j/VZN2xgqNPc4CKHylD63Q68LFWfbPJE=\r\n=tKIv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230503040956-5c49643f-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/3164698a6acdc1c2428d1b74aa5ab528/blocksuite-virgo-0.0.0-20230503040956-5c49643f-nightly.tgz","_integrity":"sha512-OjwTBKHrw+pUGMjqGTDoEZigZy0QFvLiNWHGw16K3qWf3/ANpYvV1c7hjb1LD//lRg+ZN0szcPXMuObZCX6jiQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230503040956-5c49643f-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.2","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230503040956-5c49643f-nightly_1683159832566_0.23206060565662545","host":"s3://npm-registry-packages"}},"0.0.0-20230504140113-3a4b0abb-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230504140113-3a4b0abb-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230504140113-3a4b0abb-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"49b2a9f8e451dc8cf530304b2bc7facae823e3de","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230504140113-3a4b0abb-nightly.tgz","fileCount":152,"integrity":"sha512-p0GXzfWhgXuhg1jyGRxJuRLiK8lcagQvPe5wwgw3lpFhPFDpMqdUMxIfFdiQ/Not87+qDK6S10QkiiSHrG+FgQ==","signatures":[{"sig":"MEUCIQCPDvEzgHbi8xbsuQ00yPo3a+qzw5Ls2PtIN5gFvA5G2wIgBbvlIbk8sAkaylCCdNGs3sBJLSsJkI40w1mzc7TmE1k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230504140113-3a4b0abb-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":479091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkVEyJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrzOA//f8CUItfnnJMyOB6IvKVR9IqIWY3n9Ora6fY9QB7JMno8HLQ3\r\nBJCNg+WJxpXPX5mhvfPVDkPWYEq0uCVB6SUVBeEkNnu6C9P6a0tCFTUtSGlo\r\n8EIdWcx/EdGrZ/sc5ijcp59mnSceD/lAym8w/hB8uBSvV7mMYPGvbYawuDHm\r\nYDctfutf4XYQTIkEO0xp0d8/EkTwHiaix1kEFo4llaHpV6sJZmNZmRsMg7Ze\r\n3bPXOeC3fX5+qY7OchSH1zbPCOjebRk2o2Aqjq/c/CUfpq/WFmuX0PWggDRB\r\ndzjZ8fqanECXqWnG6YGMCC17XIi+RKN0m0P8kaj2Kl9YkdmSDyjmm7JAGHhy\r\n3iBzmLUi5hj2ydgSIA1QHxh6UBH4eu8qgB1JMRm/haSnPsD+DQSrupKRPzPa\r\nSUDcXXuOOvw+V0XwwSsO4PhiRoTCpaq8uL2EtHetnC2Dadwtwpz/mc347WKP\r\n579HOKDl8lNTsnAK5i2JL5s/m3TixLbHqJP3U1WxFUqCfLbVxvjmRPjqPgw0\r\n0f2nk+wnhRwLgJJHFZKVrvTlbCMPl/sqLq0Usipg4RN7gdty1Xaupcla8lVF\r\npDwrPqvhnGdSROcmwPGiOy/EV3Rj9ZUmFrx3NqhWp31bHqq6iv6dA6v1rkRT\r\nFpfVSQigJoqXaEV+KuupIU5ZApw3EOh8cw0=\r\n=e9rl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230504140113-3a4b0abb-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/06aef6a4f976664ee4d1506f02e41e86/blocksuite-virgo-0.0.0-20230504140113-3a4b0abb-nightly.tgz","_integrity":"sha512-p0GXzfWhgXuhg1jyGRxJuRLiK8lcagQvPe5wwgw3lpFhPFDpMqdUMxIfFdiQ/Not87+qDK6S10QkiiSHrG+FgQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230504140113-3a4b0abb-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230504140113-3a4b0abb-nightly_1683246216641_0.6909196627931766","host":"s3://npm-registry-packages"}},"0.0.0-20230505225643-03f75e5e-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230505225643-03f75e5e-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230505225643-03f75e5e-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"2e1af57970204ddb3e6990b2ae264d914867cd15","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230505225643-03f75e5e-nightly.tgz","fileCount":152,"integrity":"sha512-beVNo6jsIiS7Vy5nUTBHip/sltEUTVM244KY32PFI9OnPBGP0ruSVcSMXF2wnbzefPcdObZx6hdGqEhwpG1zgA==","signatures":[{"sig":"MEQCIHtMglU9hFyqlBIUMyLg7AItK3I9LIeyPYoOuF/tGOauAiAlMCwNhqBuw+5gxKSlA39mVRRvrzGdpmf8AHozAPDscQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230505225643-03f75e5e-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":480401},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230505225643-03f75e5e-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/b6f7d35c6aff2855afba1423b00d82dd/blocksuite-virgo-0.0.0-20230505225643-03f75e5e-nightly.tgz","_integrity":"sha512-beVNo6jsIiS7Vy5nUTBHip/sltEUTVM244KY32PFI9OnPBGP0ruSVcSMXF2wnbzefPcdObZx6hdGqEhwpG1zgA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230505225643-03f75e5e-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230505225643-03f75e5e-nightly_1683332539447_0.5559956701842208","host":"s3://npm-registry-packages"}},"0.0.0-20230506085552-66fcf3a2-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230506085552-66fcf3a2-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230506085552-66fcf3a2-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"476b1024ab23848377f69fa9e4c325d12e72b49d","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230506085552-66fcf3a2-nightly.tgz","fileCount":152,"integrity":"sha512-DHlv50QjkST7P46XxTk3SBsAAByJ1jfeyH9VrUUw18YWkKdmsCG1sY/B0ZeNTnJAeyWgEUUkZWj8D/7Q4vWDMQ==","signatures":[{"sig":"MEUCIFSNftbDNTBbPt9xWkJFOcK9PazgU6202e3tjXRvM2ydAiEA5KgM7iaSW7va0qHY9npELoZ40qCRnOAzHMa4rnLQRvY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230506085552-66fcf3a2-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":480405},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230506085552-66fcf3a2-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/1391fa3b9747a5543ee756dc971453a7/blocksuite-virgo-0.0.0-20230506085552-66fcf3a2-nightly.tgz","_integrity":"sha512-DHlv50QjkST7P46XxTk3SBsAAByJ1jfeyH9VrUUw18YWkKdmsCG1sY/B0ZeNTnJAeyWgEUUkZWj8D/7Q4vWDMQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230506085552-66fcf3a2-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230506085552-66fcf3a2-nightly_1683419139271_0.5791226457021625","host":"s3://npm-registry-packages"}},"0.0.0-20230507142042-29bc8617-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230507142042-29bc8617-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230507142042-29bc8617-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"1c0514c5012d547682778e0cbcea71275b5f08ba","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230507142042-29bc8617-nightly.tgz","fileCount":152,"integrity":"sha512-xJxVdxNc9Yoyw4KerIqf4XSRVUomrB6UCUWQbRZOn23+CpcR915vzOUasy1hBopsCrBaW1zDnstfHFUKk/xKZQ==","signatures":[{"sig":"MEYCIQCCoKKDFX6gbvqLzb20bHbB/W5E1yXYHj1Q4YdVepnLRAIhALOoKApQwHXep9lnoibAkZydzYfsW0W5eJw+jamVYP3a","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230507142042-29bc8617-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":480405},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230507142042-29bc8617-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/5b4dc9b1ac7cb53adf18ad0be3b54bbd/blocksuite-virgo-0.0.0-20230507142042-29bc8617-nightly.tgz","_integrity":"sha512-xJxVdxNc9Yoyw4KerIqf4XSRVUomrB6UCUWQbRZOn23+CpcR915vzOUasy1hBopsCrBaW1zDnstfHFUKk/xKZQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230507142042-29bc8617-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230507142042-29bc8617-nightly_1683505397159_0.5328667127647866","host":"s3://npm-registry-packages"}},"0.0.0-20230508043859-34d0cc68-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230508043859-34d0cc68-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230508043859-34d0cc68-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"7f2172311ed96f08a047e39931af44aa73ef5b54","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230508043859-34d0cc68-nightly.tgz","fileCount":152,"integrity":"sha512-Oo11SEM/XJUQzQtpmKcrY2BCLkfFbOK0gM5kh9Jv9xxX0kXT+wY/w/xrh0yU3U8hhGCxyPA027FnQyrcacPB5A==","signatures":[{"sig":"MEUCIQD/dm4Jjug/IFd6n4adyV1TTQkm/iscvU3XobgAij8NRwIgFIcBobsdT92MmFWeXP8IPnt+0ZsqSmRFm0Y6zsgpEwM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230508043859-34d0cc68-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":480413},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230508043859-34d0cc68-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/cac817d1a881492c40194bce20d8e0e0/blocksuite-virgo-0.0.0-20230508043859-34d0cc68-nightly.tgz","_integrity":"sha512-Oo11SEM/XJUQzQtpmKcrY2BCLkfFbOK0gM5kh9Jv9xxX0kXT+wY/w/xrh0yU3U8hhGCxyPA027FnQyrcacPB5A==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230508043859-34d0cc68-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230508043859-34d0cc68-nightly_1683520901706_0.004011419562466312","host":"s3://npm-registry-packages"}},"0.0.0-20230508161503-04475f67-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230508161503-04475f67-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230508161503-04475f67-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"3d3e3346e4db18ec1466f17e40f7cc2bdb96931f","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230508161503-04475f67-nightly.tgz","fileCount":152,"integrity":"sha512-jJc/OtmxOu5B3eN70EZ2b4oimq+Rpjd2dCBiVNG/AFoZbaiy/pbs2VFWYZ0oCg6I2dSXIfFU+P7GUvi6X6dmGw==","signatures":[{"sig":"MEQCIHAOda7wFtXvqZp5l2WSozLreoFibz4HUNugt/VFnYGpAiBz6/S6+hTG480TCFYB6gCEZ7Zf0FlNIFm7Ex/FGmGy1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230508161503-04475f67-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":481116},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230508161503-04475f67-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/a5b44644e973a183502fd0a3b2a3f6ba/blocksuite-virgo-0.0.0-20230508161503-04475f67-nightly.tgz","_integrity":"sha512-jJc/OtmxOu5B3eN70EZ2b4oimq+Rpjd2dCBiVNG/AFoZbaiy/pbs2VFWYZ0oCg6I2dSXIfFU+P7GUvi6X6dmGw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230508161503-04475f67-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230508161503-04475f67-nightly_1683591880912_0.003974627887020299","host":"s3://npm-registry-packages"}},"0.0.0-20230509052644-b8b1b6a1-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230509052644-b8b1b6a1-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230509052644-b8b1b6a1-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"ae5614873e1f33bd7ca38c5a4a745f018d88a47d","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230509052644-b8b1b6a1-nightly.tgz","fileCount":152,"integrity":"sha512-gABRLrxdmlux/TxwcnVCeA6WR74HG8Q9hz6k8Gq3xtURhTaTwrJMcSjnAgz19ma/9IVXg4oAgA2xsVmU+qYGTw==","signatures":[{"sig":"MEYCIQDKNXVRFPklZpGOAErYJHzSLiOzsHqY57jVg2pnynxatwIhAJDQ2HIQ8PjuUP9sDt3+dWg6tYFcvLR9jNQzd7alBAYv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230509052644-b8b1b6a1-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":480918},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230509052644-b8b1b6a1-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/8372358e3c9b2c8f7063978e32110951/blocksuite-virgo-0.0.0-20230509052644-b8b1b6a1-nightly.tgz","_integrity":"sha512-gABRLrxdmlux/TxwcnVCeA6WR74HG8Q9hz6k8Gq3xtURhTaTwrJMcSjnAgz19ma/9IVXg4oAgA2xsVmU+qYGTw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230509052644-b8b1b6a1-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230509052644-b8b1b6a1-nightly_1683611313312_0.5007558386075992","host":"s3://npm-registry-packages"}},"0.0.0-20230509150141-055b5702-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230509150141-055b5702-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230509150141-055b5702-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"553a4dc0d4bd1dff425bf7d4b908fc45af352849","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230509150141-055b5702-nightly.tgz","fileCount":152,"integrity":"sha512-xwqUS8eZvDUeKGPpIAWWIfohB09noMw3bFm0KgPEHLzkDXqo3ztVpOc0MCDqOW0Y4g4tNHmAmqLa+Z9yoy0LpA==","signatures":[{"sig":"MEQCIDoCiDf5VG/n8wcxPeVlomZTsntaMsVfZoIwXbIZMjnnAiBPqie+IO0ixVf5duIFhNT+i5wUGkyZu5FyLbrz7pUphA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230509150141-055b5702-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":481384},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230509150141-055b5702-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/0924b73f5785bf06208e894da0f732da/blocksuite-virgo-0.0.0-20230509150141-055b5702-nightly.tgz","_integrity":"sha512-xwqUS8eZvDUeKGPpIAWWIfohB09noMw3bFm0KgPEHLzkDXqo3ztVpOc0MCDqOW0Y4g4tNHmAmqLa+Z9yoy0LpA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230509150141-055b5702-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230509150141-055b5702-nightly_1683678243563_0.2625249883269618","host":"s3://npm-registry-packages"}},"0.0.0-20230510195934-c3adecb7-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230510195934-c3adecb7-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230510195934-c3adecb7-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"5bde27280da234e0df0bdd9859ee6a3a1714f686","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230510195934-c3adecb7-nightly.tgz","fileCount":152,"integrity":"sha512-LZEP3IHgU3O1XUzaHpA/3ZV2RfQAZsL0aLjGH1YTrpOTGWWhZrCP/LGnJKrBwGHRSk2MT51ZkT2EPOVAj63KGw==","signatures":[{"sig":"MEQCIH586LF0dgHDheKfyQzEMZoT9/0NoKdwQPZjOL7MmGM1AiAIRZjQsfqePkqypoQGykgOkaAqF6I1loh2uohdJQ0AWg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230510195934-c3adecb7-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":481940},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230510195934-c3adecb7-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/5f7738b1638e856e7eecbe4683a6785b/blocksuite-virgo-0.0.0-20230510195934-c3adecb7-nightly.tgz","_integrity":"sha512-LZEP3IHgU3O1XUzaHpA/3ZV2RfQAZsL0aLjGH1YTrpOTGWWhZrCP/LGnJKrBwGHRSk2MT51ZkT2EPOVAj63KGw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230510195934-c3adecb7-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230510195934-c3adecb7-nightly_1683764599068_0.5495629018055177","host":"s3://npm-registry-packages"}},"0.0.0-20230511150844-c344a2b3-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230511150844-c344a2b3-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230511150844-c344a2b3-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"154632385ef2b3ea38aa8c923c79c5ec6452b11d","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230511150844-c344a2b3-nightly.tgz","fileCount":152,"integrity":"sha512-3aHiZnZNoY+B3GyPCe6sQNE+03H8GVYs3kK+Tk5aViGFsBDOD22VODGhHENxH4+vojhBPiGlMn98CRc/ZHP42g==","signatures":[{"sig":"MEUCIQDYTvIyruh33q04F5kXycVWqberNcYlwvybqbfy4Ae29QIgZk2151KvA1PqoHzfeEgFdtc3yy8eohj1yEBFDf15iYA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230511150844-c344a2b3-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":482442},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230511150844-c344a2b3-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/dc627558634eca2d9c640554af0dd72d/blocksuite-virgo-0.0.0-20230511150844-c344a2b3-nightly.tgz","_integrity":"sha512-3aHiZnZNoY+B3GyPCe6sQNE+03H8GVYs3kK+Tk5aViGFsBDOD22VODGhHENxH4+vojhBPiGlMn98CRc/ZHP42g==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230511150844-c344a2b3-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230511150844-c344a2b3-nightly_1683842503912_0.5454624859353812","host":"s3://npm-registry-packages"}},"0.0.0-20230512070537-44e59e48-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230512070537-44e59e48-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230512070537-44e59e48-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"7a1ef26aa4191d4b1cd7fa5b06a168820a06720a","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230512070537-44e59e48-nightly.tgz","fileCount":152,"integrity":"sha512-JuMdCY1gxvYMevmqEVwnAXf6S38kEzuMsSpdG5aLhkKeiGfYSzn9DhppBoFkQ/6IKFETVvOKfee5slHstxt02g==","signatures":[{"sig":"MEUCIQDyCFCx9Ctn0Cj2V6XYb75/6e1zypVEc7LK4dxxBWlg9gIgU7fCJ4GnPVol8nSBnzPLwWeGkWsDc1dBuhj6K78Bpgs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230512070537-44e59e48-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":482442},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230512070537-44e59e48-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/7f226d2496b1cfe9086aa0e5f95de6b6/blocksuite-virgo-0.0.0-20230512070537-44e59e48-nightly.tgz","_integrity":"sha512-JuMdCY1gxvYMevmqEVwnAXf6S38kEzuMsSpdG5aLhkKeiGfYSzn9DhppBoFkQ/6IKFETVvOKfee5slHstxt02g==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230512070537-44e59e48-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230512070537-44e59e48-nightly_1683917523068_0.6179493318124285","host":"s3://npm-registry-packages"}},"0.0.0-20230512192655-e61e272b-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230512192655-e61e272b-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230512192655-e61e272b-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"b676108e28057b291def5d6f071bb009eaf992cc","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230512192655-e61e272b-nightly.tgz","fileCount":152,"integrity":"sha512-V9TPJSfZFHjdBFNZq6mIqE5AgfsvafSJH6QxSgmeafbM5KLDTtZ5S1xla2Ni5/nbhVXH4pDfWUFe0Qo1n+sf6Q==","signatures":[{"sig":"MEQCIA3zS6iV1DShNz8Z0hjSJJRsDmnIc/8CexeJwr3xBEjPAiA7Gu2/pnN4Wtg8ePb0tIupU+Z3WLfFuUCwpdNmtBkzuw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230512192655-e61e272b-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":482442},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230512192655-e61e272b-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/66da9d475a5ead35a04ca7b404640e1b/blocksuite-virgo-0.0.0-20230512192655-e61e272b-nightly.tgz","_integrity":"sha512-V9TPJSfZFHjdBFNZq6mIqE5AgfsvafSJH6QxSgmeafbM5KLDTtZ5S1xla2Ni5/nbhVXH4pDfWUFe0Qo1n+sf6Q==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230512192655-e61e272b-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230512192655-e61e272b-nightly_1683920230261_0.43476149151516164","host":"s3://npm-registry-packages"}},"0.0.0-20230513043625-a1548207-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230513043625-a1548207-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230513043625-a1548207-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"f8b20747a75e78358cbcf5a5439202d89a678458","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230513043625-a1548207-nightly.tgz","fileCount":152,"integrity":"sha512-+B334I3TuF2nOfwpEcW9JxtQHcQOo+xofV5FBZynjt95LFCYIvS792ifrW1AiwGElafebOfkF6dkyHL0qJoYOA==","signatures":[{"sig":"MEUCIQCwv61MSC2iwnT0lrNxe1EhFzApqEfdfhwyX7fsC7gQLgIgNg4zPNmgPsttwzPwM/8GqehLGrgRvOWcGniMGDq5NLY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230513043625-a1548207-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":482442},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230513043625-a1548207-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/4e41e94dfbf927acc29c872b6fef58be/blocksuite-virgo-0.0.0-20230513043625-a1548207-nightly.tgz","_integrity":"sha512-+B334I3TuF2nOfwpEcW9JxtQHcQOo+xofV5FBZynjt95LFCYIvS792ifrW1AiwGElafebOfkF6dkyHL0qJoYOA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230513043625-a1548207-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230513043625-a1548207-nightly_1684023996254_0.6367963168072073","host":"s3://npm-registry-packages"}},"0.0.0-20230514141009-705c0fac-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230514141009-705c0fac-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230514141009-705c0fac-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"74719f713fea3a08faced0cbed91a8c977cb076f","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230514141009-705c0fac-nightly.tgz","fileCount":152,"integrity":"sha512-RG9uZhxTObefzg9f6HsBhRp0KRkqq2g3Z9Y+xfhQbdv/PmAOj1WvEgYoEY80IiP3O9IMHMSAr/Ve8+knkksb2g==","signatures":[{"sig":"MEYCIQCEkaj+uPnWA/7YDWUAq3iVNwpIoqVFrgq6ZeuuhdNSFAIhANNfLPmLqNJmyiN4kraC9B46jVVDkINbFnsAwpIjtpBf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230514141009-705c0fac-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":483001},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230514141009-705c0fac-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/9cf06e2457319ad4a5c50f7f4c0f0388/blocksuite-virgo-0.0.0-20230514141009-705c0fac-nightly.tgz","_integrity":"sha512-RG9uZhxTObefzg9f6HsBhRp0KRkqq2g3Z9Y+xfhQbdv/PmAOj1WvEgYoEY80IiP3O9IMHMSAr/Ve8+knkksb2g==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230514141009-705c0fac-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230514141009-705c0fac-nightly_1684110315405_0.9048897189261969","host":"s3://npm-registry-packages"}},"0.0.0-20230515135743-254e8c10-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230515135743-254e8c10-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230515135743-254e8c10-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"d2745ae05d269ea6f7ad6e080db937bc255c7f9c","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230515135743-254e8c10-nightly.tgz","fileCount":152,"integrity":"sha512-hK57w73G7mHOzhGtI52/+W0n46vn49t6oTXOjshP2ni8HsAKpXxk6+NmQZwChQ9hfdMVNYe570UjLekKozn8ig==","signatures":[{"sig":"MEUCIQDa4OkPyfnv/lPb0OQLc+kiz5Wn6FM6LLwgZXdA9+5rIwIgFSe4XiEZuTBY1kx5c+vWP+kteMwcpHuDJ3Iqip2yC2I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230515135743-254e8c10-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":484063},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230515135743-254e8c10-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/c5a8ee732b67c29d5e077fb12657e421/blocksuite-virgo-0.0.0-20230515135743-254e8c10-nightly.tgz","_integrity":"sha512-hK57w73G7mHOzhGtI52/+W0n46vn49t6oTXOjshP2ni8HsAKpXxk6+NmQZwChQ9hfdMVNYe570UjLekKozn8ig==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230515135743-254e8c10-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230515135743-254e8c10-nightly_1684196639650_0.1466171001510046","host":"s3://npm-registry-packages"}},"0.0.0-20230516150657-31efbf21-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230516150657-31efbf21-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230516150657-31efbf21-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"a045e1b0d3018c33aa5b020fd3ebf3556eddffc9","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230516150657-31efbf21-nightly.tgz","fileCount":152,"integrity":"sha512-Ze8lYIUjz1tIRdHNGX30CuTIzWm3l88Ghv/NAsD/4kwkHFu4mh2k3LV27kFcyuIzxQ/3XGiY93ETuaITkqIklg==","signatures":[{"sig":"MEUCIH32ck62z4StGIhR6Vuz5B3nVyiKMPa/yYV9i7LXwnosAiEApTFJfG4UTkCgXfS530wCapJ0FzXP3yCki3uzKbd42FU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230516150657-31efbf21-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":484703},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230516150657-31efbf21-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/c6ebe149e5aaa00a5562d2ba51e736ec/blocksuite-virgo-0.0.0-20230516150657-31efbf21-nightly.tgz","_integrity":"sha512-Ze8lYIUjz1tIRdHNGX30CuTIzWm3l88Ghv/NAsD/4kwkHFu4mh2k3LV27kFcyuIzxQ/3XGiY93ETuaITkqIklg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230516150657-31efbf21-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230516150657-31efbf21-nightly_1684283187959_0.35476969695439275","host":"s3://npm-registry-packages"}},"0.0.0-20230517071334-40b6a07f-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230517071334-40b6a07f-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230517071334-40b6a07f-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"7abd464336c268b4f8e19e94a7619f0d2b234a9c","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230517071334-40b6a07f-nightly.tgz","fileCount":152,"integrity":"sha512-RguK90yWNJKdUukq+oa0670Gme2gEETLYIrWzvzsagFFDiAUN3ov8d3yBzR4ERdM8BqCtIU1V17swCqoWc3p4A==","signatures":[{"sig":"MEYCIQC25OpXuIedY7UcNK7NVQ887Cb3egiKNF6FkIkXpnJl1QIhAOwwbnjKPFyFWW/v1j1eGyuWqh6mINEMI50/dmo27Ifw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230517071334-40b6a07f-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":484703},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230517071334-40b6a07f-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/67e61e096d6c79492265d05780fa36de/blocksuite-virgo-0.0.0-20230517071334-40b6a07f-nightly.tgz","_integrity":"sha512-RguK90yWNJKdUukq+oa0670Gme2gEETLYIrWzvzsagFFDiAUN3ov8d3yBzR4ERdM8BqCtIU1V17swCqoWc3p4A==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230517071334-40b6a07f-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230517071334-40b6a07f-nightly_1684315414861_0.0289386454114835","host":"s3://npm-registry-packages"}},"0.0.0-20230517102216-36bda4ab-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230517102216-36bda4ab-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230517102216-36bda4ab-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"fc5d73a477daadbcd4658c5e83c830fe68c637d7","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230517102216-36bda4ab-nightly.tgz","fileCount":152,"integrity":"sha512-HqDEZrWHcSuAIlapLevVXKmfx/Iu3jZ54f0utzistEl+gxsg1lYsfYNnWNgMXbbY6v9MHMiPy3bCNzlxWaNzWA==","signatures":[{"sig":"MEUCIQCIUjlQ9Ff1qtPPxAF3ZmzGhKjjQoslY4+q1kE0ETX/FQIgaqCtABQIBYI/X3AjudOyqc43IvBdfBsHcNwQk4sd5FI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230517102216-36bda4ab-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":484703},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230517102216-36bda4ab-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/a96c86801dcdecb560f716c581b2f1c2/blocksuite-virgo-0.0.0-20230517102216-36bda4ab-nightly.tgz","_integrity":"sha512-HqDEZrWHcSuAIlapLevVXKmfx/Iu3jZ54f0utzistEl+gxsg1lYsfYNnWNgMXbbY6v9MHMiPy3bCNzlxWaNzWA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230517102216-36bda4ab-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230517102216-36bda4ab-nightly_1684319189322_0.5119091933138042","host":"s3://npm-registry-packages"}},"0.0.0-20230518050717-68d6871b-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230518050717-68d6871b-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230518050717-68d6871b-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"7dae972a2c22ca1253f4ea0de2830f18033e2414","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230518050717-68d6871b-nightly.tgz","fileCount":152,"integrity":"sha512-JKJU6Cgk8Tc/OFiQ1+5PKFLyZ8tn5XrPsOcyKWmP/9TqVAuO3rouMrqx38cTwt1PbmWxZ2RbUcqVwRLDrDO3ZQ==","signatures":[{"sig":"MEYCIQCpKGoVrmWA334DWs6IsDylxRiC//qz1C7wI1myyp3ZSQIhALLXT6JHjDwmLAIzd5uS/ATNFLmnLXYMBjA1YnuKaL/v","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230518050717-68d6871b-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":484981},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230518050717-68d6871b-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/c7d66a2d43881d4aed7a172294724921/blocksuite-virgo-0.0.0-20230518050717-68d6871b-nightly.tgz","_integrity":"sha512-JKJU6Cgk8Tc/OFiQ1+5PKFLyZ8tn5XrPsOcyKWmP/9TqVAuO3rouMrqx38cTwt1PbmWxZ2RbUcqVwRLDrDO3ZQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230518050717-68d6871b-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230518050717-68d6871b-nightly_1684386632719_0.4655730972422425","host":"s3://npm-registry-packages"}},"0.0.0-20230518051344-45970a96-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230518051344-45970a96-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230518051344-45970a96-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"9d0608f16a475a0bb22ebd3e0279e1fb2d95cdd7","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230518051344-45970a96-nightly.tgz","fileCount":152,"integrity":"sha512-btd4MI5fe6R5lvwtVeYMJA3yEVOQZIKAhz1+cDHDvZnojUfrHMhZpTWUTsCyh1adsaj5++wGALdU9L3eQ9FJrA==","signatures":[{"sig":"MEUCIGJkBlayiWy4a8tuBy9qdFwdRhiKuBjsCZACzp5+6bAtAiEAnua9wJCEGg1Jp5L5OQQhTIaaHaS71pB7R3UC9OYhN4s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230518051344-45970a96-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":484981},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230518051344-45970a96-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/3d248f09f6ee22cdee4a670b15a6ed68/blocksuite-virgo-0.0.0-20230518051344-45970a96-nightly.tgz","_integrity":"sha512-btd4MI5fe6R5lvwtVeYMJA3yEVOQZIKAhz1+cDHDvZnojUfrHMhZpTWUTsCyh1adsaj5++wGALdU9L3eQ9FJrA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230518051344-45970a96-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230518051344-45970a96-nightly_1684387038808_0.3238580413589913","host":"s3://npm-registry-packages"}},"0.0.0-20230518132640-c31abed2-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230518132640-c31abed2-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230518132640-c31abed2-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"4a3e4f425641c368bf282b72652cb197be699abd","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230518132640-c31abed2-nightly.tgz","fileCount":152,"integrity":"sha512-ath+lDNHF/yEKyU/lGCk95lo5zC1n7v8IO203KLsiEFfc+bS/N2+PTwSPKIrDwudcaNNHogSt2M9YQxRhBZKSA==","signatures":[{"sig":"MEQCIGiVCZ7wB1IN7kYnMy67gIBPyU35I7uJPRSpLIN4EDAbAiBRgp0jOV1jan1xxA3bCAH98/BJ4J+DrfZUFVDPkA+ZaQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230518132640-c31abed2-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":484981},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230518132640-c31abed2-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/9aab8d5ad00423660c23c7731a6a58ee/blocksuite-virgo-0.0.0-20230518132640-c31abed2-nightly.tgz","_integrity":"sha512-ath+lDNHF/yEKyU/lGCk95lo5zC1n7v8IO203KLsiEFfc+bS/N2+PTwSPKIrDwudcaNNHogSt2M9YQxRhBZKSA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230518132640-c31abed2-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230518132640-c31abed2-nightly_1684455873333_0.6367809992563511","host":"s3://npm-registry-packages"}},"0.0.0-20230519064753-1a553313-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230519064753-1a553313-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230519064753-1a553313-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"90849da0b604761af646730f0d8bc4725f4d8b2c","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230519064753-1a553313-nightly.tgz","fileCount":152,"integrity":"sha512-+xpRLA4UXNQfhEi7kBHHdPogct6E8sZU/mX4MNIZq6ckIAnq3CmTQ+RMjQbrQbHhye/fTsPP9FQ3TzMxi06PBA==","signatures":[{"sig":"MEQCIGx+rd7p1REi7fkPlUO9+hIQEdBdBGY8V3Cuw0UAMEYgAiBnwOg7MZoe9hdBZrRT9Gy6dT6xQVBDEz7cjHKoHxWXKg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230519064753-1a553313-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":485168},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230519064753-1a553313-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/9d8620235ef19acbb74d7d88209d7cf2/blocksuite-virgo-0.0.0-20230519064753-1a553313-nightly.tgz","_integrity":"sha512-+xpRLA4UXNQfhEi7kBHHdPogct6E8sZU/mX4MNIZq6ckIAnq3CmTQ+RMjQbrQbHhye/fTsPP9FQ3TzMxi06PBA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230519064753-1a553313-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230519064753-1a553313-nightly_1684479042455_0.02956084732097075","host":"s3://npm-registry-packages"}},"0.0.0-20230519102837-01acd96b-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230519102837-01acd96b-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230519102837-01acd96b-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"e1c2edc0a227507ff28c7237d80913f58bf46bbf","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230519102837-01acd96b-nightly.tgz","fileCount":152,"integrity":"sha512-z5/eWyYX8GQ2wyLdrfsNDymvvFQsezb7Vs0kBUOmvGFdSA2DNYxzcEDWV7I5gqbPH/qrRK1Aw/SQoBGRg7h8sw==","signatures":[{"sig":"MEUCIDtyIKPlPoUEpppwfTPcw9cWhVXWY841xr/oloAXdH+1AiEAiiX4OzooW/yX3ILbRzwq08AgpGb+GavYtkYuTzmSk6U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230519102837-01acd96b-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":485168},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230519102837-01acd96b-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/9249ec5473c0ad3c8ceddcd5423bf9df/blocksuite-virgo-0.0.0-20230519102837-01acd96b-nightly.tgz","_integrity":"sha512-z5/eWyYX8GQ2wyLdrfsNDymvvFQsezb7Vs0kBUOmvGFdSA2DNYxzcEDWV7I5gqbPH/qrRK1Aw/SQoBGRg7h8sw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230519102837-01acd96b-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230519102837-01acd96b-nightly_1684542242432_0.8831214934776619","host":"s3://npm-registry-packages"}},"0.0.0-20230522085150-18e83864-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230522085150-18e83864-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230522085150-18e83864-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"b5a5885dcd33798dd0241c87b2ec2a568c44fad0","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230522085150-18e83864-nightly.tgz","fileCount":152,"integrity":"sha512-nD62ccLlJOMwnOidmw6C+efGsGMFZDmz/TEAZy2iOgTFpyTrJIPUJIGkcf84ivQB83HiPgtIlfvzMdY3G8q5TQ==","signatures":[{"sig":"MEQCICVAji/bsR+dYRFNSBAoy2L8q7KRk5whkanC7VGrPdXqAiAmpXZ9e6XNDl+y4ZfqFgVOCtK6oXgf5+EdL02AOJMRDw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230522085150-18e83864-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":486890},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230522085150-18e83864-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/101a617d1533d2c497760f64420a5a73/blocksuite-virgo-0.0.0-20230522085150-18e83864-nightly.tgz","_integrity":"sha512-nD62ccLlJOMwnOidmw6C+efGsGMFZDmz/TEAZy2iOgTFpyTrJIPUJIGkcf84ivQB83HiPgtIlfvzMdY3G8q5TQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230522085150-18e83864-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230522085150-18e83864-nightly_1684801497532_0.4367975437637357","host":"s3://npm-registry-packages"}},"0.0.0-20230523113844-e23384f1-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230523113844-e23384f1-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230523113844-e23384f1-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"f66a285badaa67fd02b3d1837e875753b4091b6c","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230523113844-e23384f1-nightly.tgz","fileCount":152,"integrity":"sha512-1WIpQdIj7y5m9qkAOq3a2j4hjBQgOIdhnOvFeNnAB8EOwGWpqEysHwkBz6BmgjUgzlBBQQOLC4T9QgKWq1muZA==","signatures":[{"sig":"MEUCIQDdVU2fUe2VevqxBifzp8Vs+52Mc8bXWh99MUq1Xv93FAIgQb6gffa2a3qTat2joAjm4+X6w5fP9ewidYslUcW/I8c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230523113844-e23384f1-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":487465},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230523113844-e23384f1-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/fe3c6874cb09219447c6d615bfde9c15/blocksuite-virgo-0.0.0-20230523113844-e23384f1-nightly.tgz","_integrity":"sha512-1WIpQdIj7y5m9qkAOq3a2j4hjBQgOIdhnOvFeNnAB8EOwGWpqEysHwkBz6BmgjUgzlBBQQOLC4T9QgKWq1muZA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230523113844-e23384f1-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230523113844-e23384f1-nightly_1684887847631_0.24380887710385601","host":"s3://npm-registry-packages"}},"0.0.0-20230524232247-8c175b40-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230524232247-8c175b40-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230524232247-8c175b40-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"55847e8f2965aa6ccc344acb8c491a367546bc70","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230524232247-8c175b40-nightly.tgz","fileCount":152,"integrity":"sha512-BQkCCja05YvwdWdcgUQtV0TrVZ6ZWILEZVrWQtBERu/JEU9YCoj2XSsdCnI89nX9HuoKhHNpaukflrfLd82ZOg==","signatures":[{"sig":"MEYCIQCJi9WVzmFBPfjjHFHQk8AXA1fi/uA50NGp/6Ex1R461QIhAP/9exq1kjbbPC6aC7iqPRQmrXY2GqBAXWMQOu0H6FAv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230524232247-8c175b40-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":486650},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230524232247-8c175b40-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/e25c4a7633927cfced4567f593a420b3/blocksuite-virgo-0.0.0-20230524232247-8c175b40-nightly.tgz","_integrity":"sha512-BQkCCja05YvwdWdcgUQtV0TrVZ6ZWILEZVrWQtBERu/JEU9YCoj2XSsdCnI89nX9HuoKhHNpaukflrfLd82ZOg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230524232247-8c175b40-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230524232247-8c175b40-nightly_1684974202042_0.5901949661109642","host":"s3://npm-registry-packages"}},"0.0.0-20230525011821-20259c76-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230525011821-20259c76-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230525011821-20259c76-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"f8da71ddc82c1772b2f088fd6b2543de26489705","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230525011821-20259c76-nightly.tgz","fileCount":152,"integrity":"sha512-yOPqGmF7DQVKvm2ItnUZ0QQ1Cs+N1yGylA/3WMguqMytWcmJX4S2vZRUoVxZkWIvTiY0ySiYW/CV/P8FJ5VOUQ==","signatures":[{"sig":"MEUCIQCDqGynaN/9/I1i9VCxeehrlGdewG0nez3DT0RpYJ23MAIgM4Jpjibxkec5UJm/SbbbLmtyLkB79Nw9BF1zuEW8GJM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230525011821-20259c76-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":486566},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230525011821-20259c76-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/e9582a869b0eb4c7cd45dc760a26b91d/blocksuite-virgo-0.0.0-20230525011821-20259c76-nightly.tgz","_integrity":"sha512-yOPqGmF7DQVKvm2ItnUZ0QQ1Cs+N1yGylA/3WMguqMytWcmJX4S2vZRUoVxZkWIvTiY0ySiYW/CV/P8FJ5VOUQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230525011821-20259c76-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230525011821-20259c76-nightly_1684980154960_0.931342270709842","host":"s3://npm-registry-packages"}},"0.0.0-20230525072216-d4cc19b1-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230525072216-d4cc19b1-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230525072216-d4cc19b1-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"d3f7433a64d1a332c4f49a13253351aee10d8062","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230525072216-d4cc19b1-nightly.tgz","fileCount":152,"integrity":"sha512-UG8PGQIQDfSTqthV9QtkTslNS6qqL1sFfMWpEjWBFr7FeyBCuAuz/jBiE9VZJXoPc3uzwERxHYc/0uCKj22nBg==","signatures":[{"sig":"MEUCIQCnhYxPM0UhWn2gQ8hr/2f4siwawiqxsMg+2Ip0ngcGtgIgQpWoKCFoinT1OZlfQ4TvuTKzbW4WDow5rS/nSwVg2/c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230525072216-d4cc19b1-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":486924},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230525072216-d4cc19b1-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/f2fab2e86f63850070731bad523247ee/blocksuite-virgo-0.0.0-20230525072216-d4cc19b1-nightly.tgz","_integrity":"sha512-UG8PGQIQDfSTqthV9QtkTslNS6qqL1sFfMWpEjWBFr7FeyBCuAuz/jBiE9VZJXoPc3uzwERxHYc/0uCKj22nBg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230525072216-d4cc19b1-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230525072216-d4cc19b1-nightly_1685000982492_0.8315681169830258","host":"s3://npm-registry-packages"}},"0.0.0-20230525112306-4e165666-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230525112306-4e165666-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230525112306-4e165666-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"13882f6f8f977ae1c30f23c1a07b688c7e14577b","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230525112306-4e165666-nightly.tgz","fileCount":152,"integrity":"sha512-swtfYGY5uZcjRdOpAxfRoMGfrUGyLXivYtg7/UNxly+leQz9b1DxjyqXn5Cc09M2oqWmB5HP6QWYk0UMzifpQw==","signatures":[{"sig":"MEUCIHxjvKx4T5sr+8zS5nmkJ4YGrRGiaryamjG+WGCw50iQAiEAnAtI/w9R2fiFmJsivykh+L6+tKVqvq+r2mXjPwHYN5c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230525112306-4e165666-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":489029},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230525112306-4e165666-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/d6a7eb41a97dbc44334d0b92a1926a54/blocksuite-virgo-0.0.0-20230525112306-4e165666-nightly.tgz","_integrity":"sha512-swtfYGY5uZcjRdOpAxfRoMGfrUGyLXivYtg7/UNxly+leQz9b1DxjyqXn5Cc09M2oqWmB5HP6QWYk0UMzifpQw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230525112306-4e165666-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230525112306-4e165666-nightly_1685023204983_0.7905895000260799","host":"s3://npm-registry-packages"}},"0.0.0-20230526010315-e1d4bf97-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230526010315-e1d4bf97-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230526010315-e1d4bf97-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"a089a6fd4d2421b215c08e76ea6a549a8396a7df","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230526010315-e1d4bf97-nightly.tgz","fileCount":152,"integrity":"sha512-lf4aAWxrzUxheRzRliFs0Na2VPvhocED+uROGliP0G3DObMZX8q+NRTQL9EGu9pjplhzUAZDB2jwP2YTw/34ng==","signatures":[{"sig":"MEQCIGNj9rM2K82CoX/OfIODOT52DEPDE6A7LtrDoCtcFnJFAiBoOHY5w/N0YLT4Xef12m2HAK7taJLVEWgHaV7jx9u3VQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230526010315-e1d4bf97-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":489029},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230526010315-e1d4bf97-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/1c0a00572e17da6a3f4555c2b3e851eb/blocksuite-virgo-0.0.0-20230526010315-e1d4bf97-nightly.tgz","_integrity":"sha512-lf4aAWxrzUxheRzRliFs0Na2VPvhocED+uROGliP0G3DObMZX8q+NRTQL9EGu9pjplhzUAZDB2jwP2YTw/34ng==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230526010315-e1d4bf97-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230526010315-e1d4bf97-nightly_1685066519146_0.9993355011509191","host":"s3://npm-registry-packages"}},"0.0.0-20230526024755-74df4d56-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230526024755-74df4d56-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230526024755-74df4d56-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"5d20d0f5667b569c01daaa0347ac6d8c097d1314","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230526024755-74df4d56-nightly.tgz","fileCount":152,"integrity":"sha512-eMOYN3PLpOUxK8dXIG23GaNt2/1dIBhkABoY4CpEr2xmSNDB2duX27wkXWWOghJJLkEZg54JECBQjpK/YtgY8A==","signatures":[{"sig":"MEYCIQDf8p0PPX1AaEGxfCvI51kkhuS1Y2qRsOOGyCdXI6LsPgIhAIzx//op2iVZLyhHmrZt0PHrlZ6x1NfocGoTU2uwkhd/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230526024755-74df4d56-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":489809},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230526024755-74df4d56-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/11ebfd22a78c513bb0234af79d1d7b0b/blocksuite-virgo-0.0.0-20230526024755-74df4d56-nightly.tgz","_integrity":"sha512-eMOYN3PLpOUxK8dXIG23GaNt2/1dIBhkABoY4CpEr2xmSNDB2duX27wkXWWOghJJLkEZg54JECBQjpK/YtgY8A==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230526024755-74df4d56-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230526024755-74df4d56-nightly_1685069463901_0.5019595149045046","host":"s3://npm-registry-packages"}},"0.0.0-20230526105510-0350c2c0-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230526105510-0350c2c0-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230526105510-0350c2c0-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"6ddc3de608f57a43339b43f33b87019e6a1f748e","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230526105510-0350c2c0-nightly.tgz","fileCount":152,"integrity":"sha512-XYhWx0tXeC4Dhv/NLbauhJCwUlOTGePPCOXaypXRIy0gBaTqGBEWaIGyN0N65dxDwpD9E67ySdAmBKEj3NeRuA==","signatures":[{"sig":"MEYCIQDZk83fr2GjxkWgjWn0ODyyM0EYw25J9PF7BEd7KDtnJgIhAMZY6Ql5/1kWZnL4sRUmYCUE/C5RDZmx0SIfVlP+rOVX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230526105510-0350c2c0-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":489829},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230526105510-0350c2c0-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/2004164bcca4a92067cd91c8e40bd302/blocksuite-virgo-0.0.0-20230526105510-0350c2c0-nightly.tgz","_integrity":"sha512-XYhWx0tXeC4Dhv/NLbauhJCwUlOTGePPCOXaypXRIy0gBaTqGBEWaIGyN0N65dxDwpD9E67ySdAmBKEj3NeRuA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230526105510-0350c2c0-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230526105510-0350c2c0-nightly_1685147191652_0.8785904243365836","host":"s3://npm-registry-packages"}},"0.0.0-20230527155447-cef80420-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230527155447-cef80420-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230527155447-cef80420-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"051e6ca400b65987f652916e4ca2d2058ecb838a","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230527155447-cef80420-nightly.tgz","fileCount":152,"integrity":"sha512-/pHPTL45uVhmT99IMMVswttqNOuGKy0mYFS0Er+YbOdqKxDHmuWRjqRL4QrwQhSRW1s7Uec3+o/mKhMx9Xl1Tg==","signatures":[{"sig":"MEYCIQD9v4pcwP6IzyHjZSNKsq8DCqSIA6QwBeYE0nIvPU7vUQIhAK1Zx7QmK0to0ZxP1sZhXrhMHaPcXCwFt4EJvS03VqdA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230527155447-cef80420-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":490628},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230527155447-cef80420-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/ba53fd6592d253b70b5f9a930373760f/blocksuite-virgo-0.0.0-20230527155447-cef80420-nightly.tgz","_integrity":"sha512-/pHPTL45uVhmT99IMMVswttqNOuGKy0mYFS0Er+YbOdqKxDHmuWRjqRL4QrwQhSRW1s7Uec3+o/mKhMx9Xl1Tg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230527155447-cef80420-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230527155447-cef80420-nightly_1685233618760_0.9380110711989293","host":"s3://npm-registry-packages"}},"0.0.0-20230529063116-9927a75a-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230529063116-9927a75a-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230529063116-9927a75a-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"9f2162788180edd84d4bd4264779429851d4ecac","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230529063116-9927a75a-nightly.tgz","fileCount":152,"integrity":"sha512-UbJK8nDQH1vIlLRaTNgKqLHmA6EEZerwJp+yJb/wkfHEpxkCIQRJfXy2Xf4s8v1r9tZynvrV7/pwaQ4XSlguRw==","signatures":[{"sig":"MEUCIDGZsZGayvBJwQMYK6+kn2C4k/Y2UyO/o0R886T6V6koAiEAivN02KPBrNh66EddhfDjhluzxSkOgJ4WYC01vNRg/80=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230529063116-9927a75a-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":490628},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230529063116-9927a75a-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/f7ad548e4264fdcdef7db5b413c7ae18/blocksuite-virgo-0.0.0-20230529063116-9927a75a-nightly.tgz","_integrity":"sha512-UbJK8nDQH1vIlLRaTNgKqLHmA6EEZerwJp+yJb/wkfHEpxkCIQRJfXy2Xf4s8v1r9tZynvrV7/pwaQ4XSlguRw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230529063116-9927a75a-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230529063116-9927a75a-nightly_1685343028926_0.3301503829498582","host":"s3://npm-registry-packages"}},"0.0.0-20230529073717-06f81074-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230529073717-06f81074-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230529073717-06f81074-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"08956b1ef5be76ed35d89c747c7d28cc96244e51","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230529073717-06f81074-nightly.tgz","fileCount":152,"integrity":"sha512-yUt+3F14Ikm3R5bdQ1Hx5xQ/s+N4EQPiA/myRMRGU/e4XqFVN7iNtckWUcXepCkBr+O9KXr5ATuj+BvN/k875w==","signatures":[{"sig":"MEUCIB0UDwXJZCnll3mR16cLvZxbHMWKMwMruPw60/2VQ59WAiEAvrDj1XHXEvt9GRSqr5dHBfwX2BWweqWEg2hn5JlwiWo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230529073717-06f81074-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":491196},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230529073717-06f81074-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/f1afc2488f7dfa9bcd7c6fded39b5ee7/blocksuite-virgo-0.0.0-20230529073717-06f81074-nightly.tgz","_integrity":"sha512-yUt+3F14Ikm3R5bdQ1Hx5xQ/s+N4EQPiA/myRMRGU/e4XqFVN7iNtckWUcXepCkBr+O9KXr5ATuj+BvN/k875w==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230529073717-06f81074-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230529073717-06f81074-nightly_1685346145299_0.714439208341018","host":"s3://npm-registry-packages"}},"0.0.0-20230529075358-c0eb6564-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230529075358-c0eb6564-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230529075358-c0eb6564-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"2135e843dc9112167cfaa12accc65117f104d3b1","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230529075358-c0eb6564-nightly.tgz","fileCount":152,"integrity":"sha512-/0Zc5df/ldAW84Ksx8S3SMnxsvFrXUdjO4ByWfMUbEGbeLUWUuf3nWRNov04ZRbi92sMOPbLRwYczUpqCHpDUA==","signatures":[{"sig":"MEUCIEpcZ8eCea19470FH09O1mptizTL7w9KfE6muc5yXoC3AiEAxtYMehAafei8WupLs+2dhkpt1g1xPCJRWuCxjPDPTFM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230529075358-c0eb6564-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":491196},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230529075358-c0eb6564-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/ba4e2e2197d351541faa1f49337334f0/blocksuite-virgo-0.0.0-20230529075358-c0eb6564-nightly.tgz","_integrity":"sha512-/0Zc5df/ldAW84Ksx8S3SMnxsvFrXUdjO4ByWfMUbEGbeLUWUuf3nWRNov04ZRbi92sMOPbLRwYczUpqCHpDUA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230529075358-c0eb6564-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230529075358-c0eb6564-nightly_1685347015294_0.14263247640220955","host":"s3://npm-registry-packages"}},"0.0.0-20230529085908-d3d4c1a3-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230529085908-d3d4c1a3-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230529085908-d3d4c1a3-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"33a538f7212dfc981f913befa9809e9ddabdaf82","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230529085908-d3d4c1a3-nightly.tgz","fileCount":152,"integrity":"sha512-2jPhgdlmwvg6RgXPnsHGmqiDEjVUrsuEwy65vicNq7bxkFl9jpawhS96tnXjRVbhixIQLgCre5ACxIkbD/5FJw==","signatures":[{"sig":"MEYCIQCGh67nRlcBF7+Ss1Uuw0YlkdBq/1vqQdXBzxDp/835agIhAJ9yz+orxz/iLYfWps4pUR6Meh7S7Re9QejGWpAWsFK3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230529085908-d3d4c1a3-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":491196},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230529085908-d3d4c1a3-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/cad3b4481a94e98e4b36d6e321eded9b/blocksuite-virgo-0.0.0-20230529085908-d3d4c1a3-nightly.tgz","_integrity":"sha512-2jPhgdlmwvg6RgXPnsHGmqiDEjVUrsuEwy65vicNq7bxkFl9jpawhS96tnXjRVbhixIQLgCre5ACxIkbD/5FJw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230529085908-d3d4c1a3-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230529085908-d3d4c1a3-nightly_1685351264638_0.7514101465510354","host":"s3://npm-registry-packages"}},"0.0.0-20230529102007-5ac37643-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230529102007-5ac37643-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230529102007-5ac37643-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"339dd5e9f08b3f2ad50c0743fff19f9aac6c07cd","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230529102007-5ac37643-nightly.tgz","fileCount":152,"integrity":"sha512-tRGmE0voNk7uH78uM5h4byKaoXrxTNxSeMm94v9ujRFVEWLxgbKT6qvIMRBLJ0cHYY7MrlYxjd6OvnqBB9Zmcw==","signatures":[{"sig":"MEYCIQCtSVCW5d+cOgDPrAD3dL4gzkfsYjDP2glCRcstFWlTewIhAK5Lc2rZKfU4i04H/IPuWbZPmwoEBVazUBCJg+oFJrAZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230529102007-5ac37643-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":491062},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230529102007-5ac37643-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/5c935ed781f16719def46ed9d0768de7/blocksuite-virgo-0.0.0-20230529102007-5ac37643-nightly.tgz","_integrity":"sha512-tRGmE0voNk7uH78uM5h4byKaoXrxTNxSeMm94v9ujRFVEWLxgbKT6qvIMRBLJ0cHYY7MrlYxjd6OvnqBB9Zmcw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230529102007-5ac37643-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230529102007-5ac37643-nightly_1685356274120_0.09730017658997836","host":"s3://npm-registry-packages"}},"0.0.0-20230529110357-2729de93-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230529110357-2729de93-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230529110357-2729de93-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"88b1fd99b8a1e08dcf9a6b16d8a90500fb6e6e72","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230529110357-2729de93-nightly.tgz","fileCount":152,"integrity":"sha512-bshJsgWTCZ6pRcx+FdsRC3oHwJ6pJkO5/Y+ONum71aBs/w7EMhWApmxnuLfwAn8k0/nCfY+5k/cbJt6Y6rRflQ==","signatures":[{"sig":"MEUCIG0lQmkKzF+72UglJUdifM1bcSGSfYeG45kPrRV1IvDzAiEAo/obGN3bByd4eqemGHSYJYlvG+qm1m9zf7vqrFl+c04=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230529110357-2729de93-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":491337},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230529110357-2729de93-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/918cc0d1f06590372a0a4eee4ff6b2d9/blocksuite-virgo-0.0.0-20230529110357-2729de93-nightly.tgz","_integrity":"sha512-bshJsgWTCZ6pRcx+FdsRC3oHwJ6pJkO5/Y+ONum71aBs/w7EMhWApmxnuLfwAn8k0/nCfY+5k/cbJt6Y6rRflQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230529110357-2729de93-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230529110357-2729de93-nightly_1685359695054_0.9563101627216883","host":"s3://npm-registry-packages"}},"0.0.0-20230529210748-ab9952ba-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230529210748-ab9952ba-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230529210748-ab9952ba-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"560544b9f2c4a75a826f03fdc8a07460139557be","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230529210748-ab9952ba-nightly.tgz","fileCount":152,"integrity":"sha512-YjvXoUpVCGGTjvOkmGvadZqoHcRGkB7e8tm6P4JB52qfGCidqLqSWLeK/PHdMdAbtXGv0HNE5bi3EgcgjQ1cKA==","signatures":[{"sig":"MEUCIQDW+cj0ZM7T8O5xpNEyTIjEYm41DuccRoyc/o0Y9UFePgIgaQluT3vTxVmM5G4CmMNMsvFIi+UkIJziYYnFOareELc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230529210748-ab9952ba-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":491337},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230529210748-ab9952ba-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/78f158244b29030d3e04764aa14920a3/blocksuite-virgo-0.0.0-20230529210748-ab9952ba-nightly.tgz","_integrity":"sha512-YjvXoUpVCGGTjvOkmGvadZqoHcRGkB7e8tm6P4JB52qfGCidqLqSWLeK/PHdMdAbtXGv0HNE5bi3EgcgjQ1cKA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230529210748-ab9952ba-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230529210748-ab9952ba-nightly_1685406449173_0.04944552008660863","host":"s3://npm-registry-packages"}},"0.0.0-20230530061436-d0702cc0-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230530061436-d0702cc0-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230530061436-d0702cc0-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"98599088278dbb9fee2280797c4402f360a96366","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230530061436-d0702cc0-nightly.tgz","fileCount":152,"integrity":"sha512-TmmQNpJtZPB5DFRY4uGCsS7eIXJYrf+0h1QmnlpJyqbaAIDR7Q4FDcssfrMOw0ri9+so+e34xvJsMsm3FEvGrg==","signatures":[{"sig":"MEUCIQD5jixLvEH+zTm86HAY590DfQlUeoIpOc7IGtShanK3dwIgEuh5aOBieII1scnJc1crUXKo5NVLMNNSDuQaM+op5N0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230530061436-d0702cc0-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":491337},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230530061436-d0702cc0-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/416dd7d5c9b70ddc28e3a8011fc871f9/blocksuite-virgo-0.0.0-20230530061436-d0702cc0-nightly.tgz","_integrity":"sha512-TmmQNpJtZPB5DFRY4uGCsS7eIXJYrf+0h1QmnlpJyqbaAIDR7Q4FDcssfrMOw0ri9+so+e34xvJsMsm3FEvGrg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230530061436-d0702cc0-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230530061436-d0702cc0-nightly_1685428147661_0.08298124618364833","host":"s3://npm-registry-packages"}},"0.0.0-20230530101649-463577c2-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230530101649-463577c2-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230530101649-463577c2-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"86d48e68487b33adc254fd9108ff162b15e93f8c","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230530101649-463577c2-nightly.tgz","fileCount":152,"integrity":"sha512-EwpILvy4wPV4dS6SCr83mlRyqDllMfXO3YdZZggTBbApnzQgtLDpX7a9VnckWisHmstShLSsXWvaIc8/8buSDw==","signatures":[{"sig":"MEQCIFzHbc7GyuqZpLKAQrGJdnhFvcoS1iy922OaKPEMDTbHAiBd2aGaAaWSeajZih7OAYsp1RxyQEKQ2MCIariRGM2Y9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230530101649-463577c2-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":493449},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230530101649-463577c2-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/18abdcb7b92a097fe17a9a34340e4ad1/blocksuite-virgo-0.0.0-20230530101649-463577c2-nightly.tgz","_integrity":"sha512-EwpILvy4wPV4dS6SCr83mlRyqDllMfXO3YdZZggTBbApnzQgtLDpX7a9VnckWisHmstShLSsXWvaIc8/8buSDw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230530101649-463577c2-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230530101649-463577c2-nightly_1685492815712_0.9882043734460833","host":"s3://npm-registry-packages"}},"0.0.0-20230531040027-44cd9d8e-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230531040027-44cd9d8e-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230531040027-44cd9d8e-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"d6af4243649ae7f26ebb7bca4c6ecd254c3c83ee","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230531040027-44cd9d8e-nightly.tgz","fileCount":152,"integrity":"sha512-cejD9NDCD/uD8413fLhbLe0h4ImKUj3jLrm/Kg1lCbOeDZ2YzmLR6gFLqubDnd2NXzWDeY4ins0eXkcsjKfpBw==","signatures":[{"sig":"MEUCIFiUFq4x53IU50tl8m0WG9uiPu41NI1xwo4qSuugntcaAiEA2YV4QyUT2fVu30PYijhRhOnEa29zsWXHXO5nzYxNo00=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230531040027-44cd9d8e-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":493488},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230531040027-44cd9d8e-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/b9d4583917c9cfec9ac3a919fe625c63/blocksuite-virgo-0.0.0-20230531040027-44cd9d8e-nightly.tgz","_integrity":"sha512-cejD9NDCD/uD8413fLhbLe0h4ImKUj3jLrm/Kg1lCbOeDZ2YzmLR6gFLqubDnd2NXzWDeY4ins0eXkcsjKfpBw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230531040027-44cd9d8e-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230531040027-44cd9d8e-nightly_1685506152219_0.6241091871943469","host":"s3://npm-registry-packages"}},"0.0.0-20230531071546-a544414b-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230531071546-a544414b-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230531071546-a544414b-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"4e026a0aa8521dfa6a265098c8b33dece8378486","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230531071546-a544414b-nightly.tgz","fileCount":152,"integrity":"sha512-pmQ7XyZ7JDNMjPIEWOBE8id5E70TmC86kfAlwh+R4U6JhFFpmYUPJP1T3O1TjKarSKym4kl+RMXaKUHlhKkwJg==","signatures":[{"sig":"MEYCIQCCpQ/VAcGPQB25HhU44kjcNABKWVCSCxfi02eqnebXrQIhAKDD8avIrWwZ1ITYnaa6QyehUFAo6HMmCRWccNC2kYlw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230531071546-a544414b-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":493753},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230531071546-a544414b-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/bb7ab0fdd92dc6ab6e0cb4821dc2aac1/blocksuite-virgo-0.0.0-20230531071546-a544414b-nightly.tgz","_integrity":"sha512-pmQ7XyZ7JDNMjPIEWOBE8id5E70TmC86kfAlwh+R4U6JhFFpmYUPJP1T3O1TjKarSKym4kl+RMXaKUHlhKkwJg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230531071546-a544414b-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230531071546-a544414b-nightly_1685518586756_0.5227387985686629","host":"s3://npm-registry-packages"}},"0.0.0-20230531074909-e951a818-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230531074909-e951a818-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230531074909-e951a818-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"0a3960600a8bbeca6f97e27bedbf720b859c12dd","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230531074909-e951a818-nightly.tgz","fileCount":152,"integrity":"sha512-i7acfoX3CsS354ujdrLYjY4ahbZwiHjAf+IL53VXX0Xe9whRpaZ+V1G0Fjfez4wMwVEdFmmDNKJdsiEs26nSJQ==","signatures":[{"sig":"MEUCIQDWzLJCnliYnLIriHtKITLOT9IywcROD9bk/c6pz/6QzQIgMGUiky1S3f8KI5owPS8+Z7BV7Hgaqptguk8D/OOlulA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230531074909-e951a818-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":493757},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230531074909-e951a818-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/15f3c2eccaa6129ac1ceff0ec7979b9f/blocksuite-virgo-0.0.0-20230531074909-e951a818-nightly.tgz","_integrity":"sha512-i7acfoX3CsS354ujdrLYjY4ahbZwiHjAf+IL53VXX0Xe9whRpaZ+V1G0Fjfez4wMwVEdFmmDNKJdsiEs26nSJQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230531074909-e951a818-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230531074909-e951a818-nightly_1685519523015_0.49214745765483103","host":"s3://npm-registry-packages"}},"0.0.0-20230531080915-ca9c55a2-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230531080915-ca9c55a2-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230531080915-ca9c55a2-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"320dd90d6e491995166f4405f05e8fe750b32001","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230531080915-ca9c55a2-nightly.tgz","fileCount":152,"integrity":"sha512-xBwEFlMvQa9da+uNi/5Zt/wx+0xO0VAjYrs3Rn9x8/qNj1Ofqyfl99+vpFjifdDYVre4gcly2Ub3GlHHRtslwA==","signatures":[{"sig":"MEYCIQCZdhEbhCMt0oEGsblPmCKxZCXnNdQELzLc4SlE8+G1jwIhAN989xrOyPSh+6oXCw1ijFJguvDeumm4tQqjtzPpPzqA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230531080915-ca9c55a2-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":493761},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230531080915-ca9c55a2-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/210aacf1e443231a1f431d9f03065e6f/blocksuite-virgo-0.0.0-20230531080915-ca9c55a2-nightly.tgz","_integrity":"sha512-xBwEFlMvQa9da+uNi/5Zt/wx+0xO0VAjYrs3Rn9x8/qNj1Ofqyfl99+vpFjifdDYVre4gcly2Ub3GlHHRtslwA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230531080915-ca9c55a2-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230531080915-ca9c55a2-nightly_1685521452750_0.5027017177098625","host":"s3://npm-registry-packages"}},"0.0.0-20230531101553-3854a14c-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230531101553-3854a14c-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230531101553-3854a14c-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"fd496f0403865416b9c9d53cf7d70888166771b5","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230531101553-3854a14c-nightly.tgz","fileCount":152,"integrity":"sha512-4k8HIYaGzU7UGH7KdWBUqSvrFpDjHKi4VDXPeFy1WYvuCipSGcIhISPyeNVNcXHMSiPgLyDbDWh6UvHL026ygA==","signatures":[{"sig":"MEYCIQC8BDaj0XMNb7XWvgZo9JnD2icGvxIP7qj8XpqQwuTEagIhAMxRF43aPMubW7Lx0woK6RAH3MpmjOMXSpDhcV8QKCzE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230531101553-3854a14c-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":493761},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230531101553-3854a14c-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/e9d8fcf41673b3d6dce01eb38ce64064/blocksuite-virgo-0.0.0-20230531101553-3854a14c-nightly.tgz","_integrity":"sha512-4k8HIYaGzU7UGH7KdWBUqSvrFpDjHKi4VDXPeFy1WYvuCipSGcIhISPyeNVNcXHMSiPgLyDbDWh6UvHL026ygA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230531101553-3854a14c-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230531101553-3854a14c-nightly_1685579589445_0.7179690265718339","host":"s3://npm-registry-packages"}},"0.0.0-20230601062752-68dbf1a4-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230601062752-68dbf1a4-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230601062752-68dbf1a4-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"42b64fae94d3275a0de76b4105dc840bf02e0057","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230601062752-68dbf1a4-nightly.tgz","fileCount":152,"integrity":"sha512-1Bl2uWm7ofLqgCktluNXQe59yby6hfqKWVkaQQ/wClzJ1ko/fDbhRaUooGCjm/4vgYJV0YlZ9DYPgXPzK3Absw==","signatures":[{"sig":"MEUCIQCqk5zOc/kmvZCl8wtz7V9b0ZscTlO89gYT/uYwMbmdswIgV6POgX8NvOxDrXFueBgAF1F38fKU2Q2pko+mL5HGvOo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230601062752-68dbf1a4-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":493769},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230601062752-68dbf1a4-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/0be247ffcd711b62b4990ece2d7aae8f/blocksuite-virgo-0.0.0-20230601062752-68dbf1a4-nightly.tgz","_integrity":"sha512-1Bl2uWm7ofLqgCktluNXQe59yby6hfqKWVkaQQ/wClzJ1ko/fDbhRaUooGCjm/4vgYJV0YlZ9DYPgXPzK3Absw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230601062752-68dbf1a4-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230601062752-68dbf1a4-nightly_1685601088972_0.6423205962627923","host":"s3://npm-registry-packages"}},"0.0.0-20230601101714-0d24ba91-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230601101714-0d24ba91-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230601101714-0d24ba91-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"7403a6fd917dda839252abd24b221839d14b3c3e","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230601101714-0d24ba91-nightly.tgz","fileCount":152,"integrity":"sha512-kQgEru01YAWRvt1TWiwztuiiEmOLtiCu8x6lcNQoI5GX/svTv7kU2q/eY9k13vpQpcj3y4+CyXO6NGsbtoiq8g==","signatures":[{"sig":"MEUCIQDU8hHca7pmkjzDUauMO2aIMlHddIy64Qfm5p5FEuYBKwIgOewpWvB2GutXHIBE2NHp6yQIRAolZNR9cnqPH8c2znI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230601101714-0d24ba91-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":493973},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230601101714-0d24ba91-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/b1c7b3d1a858d0a7f6d3080154d285ff/blocksuite-virgo-0.0.0-20230601101714-0d24ba91-nightly.tgz","_integrity":"sha512-kQgEru01YAWRvt1TWiwztuiiEmOLtiCu8x6lcNQoI5GX/svTv7kU2q/eY9k13vpQpcj3y4+CyXO6NGsbtoiq8g==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230601101714-0d24ba91-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230601101714-0d24ba91-nightly_1685614916792_0.33195936972894","host":"s3://npm-registry-packages"}},"0.0.0-20230601122821-16196c35-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230601122821-16196c35-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230601122821-16196c35-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"8cba9f901d0957b715eaf0ce0a2a9928ed8ccece","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230601122821-16196c35-nightly.tgz","fileCount":152,"integrity":"sha512-zpr+DacedYKVXpzgq9eQ3o3Nf/V5QtWdK7911XZ4aCblkNpwt5QUL35RHiQaTKwdVCUN6iErsmlRcmnnoYDMIw==","signatures":[{"sig":"MEQCIA4kkg6fgxfO1fxs+LF4vPmT087qX8zhBEQjh8vIuEvMAiB94F5OUTJB+DbEAy5InYRfiWwSxHvGpJEBM8ENr012rA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230601122821-16196c35-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":493973},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230601122821-16196c35-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/d08771bc9a52b896e21cb26facc9ad69/blocksuite-virgo-0.0.0-20230601122821-16196c35-nightly.tgz","_integrity":"sha512-zpr+DacedYKVXpzgq9eQ3o3Nf/V5QtWdK7911XZ4aCblkNpwt5QUL35RHiQaTKwdVCUN6iErsmlRcmnnoYDMIw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230601122821-16196c35-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230601122821-16196c35-nightly_1685665650198_0.43225301835725216","host":"s3://npm-registry-packages"}},"0.0.0-20230602020342-81b4c523-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230602020342-81b4c523-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230602020342-81b4c523-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"5580e0ab883e2fa471eee9bca7faa04d36df4d37","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230602020342-81b4c523-nightly.tgz","fileCount":152,"integrity":"sha512-UI9us1Eus0jh8TnO+TysUzA2rG9UNeod5JsVFy5mUr+9AGJjdZ4w9QEkHEumL+FHtkDwDDmdDp2kjsivzjFf9g==","signatures":[{"sig":"MEUCIQDTqXPO06MBH1MLbz0GwXgVGRNqDI9yEh6zPAQ0y/2ZhwIgYfmQne4NybcHdysjamy4i5tq7yvq1kDmIDgWMqf/YUs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230602020342-81b4c523-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":493985},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230602020342-81b4c523-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/edbcfff40192ec5038a078d6711173bf/blocksuite-virgo-0.0.0-20230602020342-81b4c523-nightly.tgz","_integrity":"sha512-UI9us1Eus0jh8TnO+TysUzA2rG9UNeod5JsVFy5mUr+9AGJjdZ4w9QEkHEumL+FHtkDwDDmdDp2kjsivzjFf9g==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230602020342-81b4c523-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230602020342-81b4c523-nightly_1685696308059_0.18978977098885674","host":"s3://npm-registry-packages"}},"0.0.0-20230602102854-1b6ffa69-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230602102854-1b6ffa69-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230602102854-1b6ffa69-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"c2785b830bf6d19efe21a997b873ccaafbaebfb5","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230602102854-1b6ffa69-nightly.tgz","fileCount":152,"integrity":"sha512-sNSwIfdqiQ669bLvpFbXSEqyyEER/SNSQYmMdItK/oHZkhhb40eza3VKL0K2TjmJbijqn7zlrVC8eJCN9/gW/g==","signatures":[{"sig":"MEUCIBYvUdI/kHA6vHsBLQDQbVAD96gPu25mF7+F0mpouOwpAiEA0/iX6hYaFPx09jMwnmjW4YwgTov7HNykareDTT4ABhA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230602102854-1b6ffa69-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":493985},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230602102854-1b6ffa69-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/d1b114e4108d6ed73f6a3059cf5ff9dd/blocksuite-virgo-0.0.0-20230602102854-1b6ffa69-nightly.tgz","_integrity":"sha512-sNSwIfdqiQ669bLvpFbXSEqyyEER/SNSQYmMdItK/oHZkhhb40eza3VKL0K2TjmJbijqn7zlrVC8eJCN9/gW/g==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230602102854-1b6ffa69-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230602102854-1b6ffa69-nightly_1685751979236_0.254325719523568","host":"s3://npm-registry-packages"}},"0.0.0-20230604040121-4ab99587-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230604040121-4ab99587-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230604040121-4ab99587-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"f8d95a1dfc096db4ce041b170f55b7348ca74095","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230604040121-4ab99587-nightly.tgz","fileCount":152,"integrity":"sha512-bjwaigyK2SVLBj4OAXFwV8lZxzzXWNqMXZ5hf+rNC/Ct+QqGYYMnJIgb2AmBypXtPUuNlAjRhwCTVNkw3rmiVg==","signatures":[{"sig":"MEUCIEJnKAsq6lsettpSfHk/+dhx8qUR70YwY2Uawx4zjjTgAiEAz9TzXN/BEpAwuGJQv9Ng0U0HQHTyWzVCjzAozcy0ILY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230604040121-4ab99587-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":493985},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230604040121-4ab99587-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/c069a15adbc55a172fc34c2f94865ffc/blocksuite-virgo-0.0.0-20230604040121-4ab99587-nightly.tgz","_integrity":"sha512-bjwaigyK2SVLBj4OAXFwV8lZxzzXWNqMXZ5hf+rNC/Ct+QqGYYMnJIgb2AmBypXtPUuNlAjRhwCTVNkw3rmiVg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230604040121-4ab99587-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230604040121-4ab99587-nightly_1685851551132_0.5836066673178617","host":"s3://npm-registry-packages"}},"0.0.0-20230605133755-4f79f942-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230605133755-4f79f942-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230605133755-4f79f942-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"c5176bf4c2de55d768bf83e255bd54d7826e8886","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230605133755-4f79f942-nightly.tgz","fileCount":152,"integrity":"sha512-Io7gamStsDyt+c7KHgOr7ifgapxTiFNLiKtVxL0JyKdlrJE6UiJEdaSVI3cpjfFVuqvX482F9SVOS/jvLXPggA==","signatures":[{"sig":"MEYCIQDSTN8Zy1DlC2LrVN+nlHVJKfzQyjch/7YYr0SjtHJZlAIhAK8dxLkLEaLAm0wVvoZaEP78yz1vaaZArHaq2JiXz7sj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230605133755-4f79f942-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":494462},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230605133755-4f79f942-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/2e27b1eac73f4a5e20f5436ba4d1fe75/blocksuite-virgo-0.0.0-20230605133755-4f79f942-nightly.tgz","_integrity":"sha512-Io7gamStsDyt+c7KHgOr7ifgapxTiFNLiKtVxL0JyKdlrJE6UiJEdaSVI3cpjfFVuqvX482F9SVOS/jvLXPggA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230605133755-4f79f942-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230605133755-4f79f942-nightly_1686011246836_0.8697130681580707","host":"s3://npm-registry-packages"}},"0.6.0":{"name":"@blocksuite/virgo","version":"0.6.0","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.6.0","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"0e30b1f326a249a7770c8cf221242243057ab28e","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.6.0.tgz","fileCount":152,"integrity":"sha512-ch41+JMwK2BAZEJbRC3vYXGpqJ8xP9JsYOCHpRxtLAyQ3EqH35Z2H9a1b8if5DYnA+WhzFcuy+xV+nlti1BZEA==","signatures":[{"sig":"MEYCIQClnfZxkYrbs0C8oktU7zUtQkK4rIXCcRqoEICi/RG1EQIhAIE0EQv10X6sei5SMsJXlY7SFz74ZXvI/+YFaFCPKPPS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.6.0","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":494975},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.6.0.tgz","types":"dist/index.d.ts","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/4db4bc4096fc0f1daf66693e5abf2baa/blocksuite-virgo-0.6.0.tgz","_integrity":"sha512-ch41+JMwK2BAZEJbRC3vYXGpqJ8xP9JsYOCHpRxtLAyQ3EqH35Z2H9a1b8if5DYnA+WhzFcuy+xV+nlti1BZEA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.6.0_1686053321409_0.6936687844932443","host":"s3://npm-registry-packages"}},"0.0.0-20230606130340-805f430b-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230606130340-805f430b-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230606130340-805f430b-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"1f3ab99ba8c7fcf7a71d5141a3dde51754a25de3","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230606130340-805f430b-nightly.tgz","fileCount":152,"integrity":"sha512-7/iup2KjABxdK3oC00XhYTsSrdmezmW1kDbc8oksVlbJjqS+v/N1FnNcMDLLFJX1G1fIZDK9grGbUHKFoMAq9A==","signatures":[{"sig":"MEUCIBK2pn3tjq79u9YpTkv83RZqxvaOizChayHAWPDz1zipAiEAo6F4/lLFM5Iqw2qE0qirGaNbmuyKC9GKkO4zfPmnN9g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230606130340-805f430b-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":494700},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230606130340-805f430b-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/6d9d42c22e41706ed5c16f09b52fb2ce/blocksuite-virgo-0.0.0-20230606130340-805f430b-nightly.tgz","_integrity":"sha512-7/iup2KjABxdK3oC00XhYTsSrdmezmW1kDbc8oksVlbJjqS+v/N1FnNcMDLLFJX1G1fIZDK9grGbUHKFoMAq9A==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230606130340-805f430b-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230606130340-805f430b-nightly_1686097676213_0.5832170590879975","host":"s3://npm-registry-packages"}},"0.0.0-20230607055421-9b20fcaf-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230607055421-9b20fcaf-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230607055421-9b20fcaf-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"d7da50aa3af59a677d6469433887dd981fe026d9","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230607055421-9b20fcaf-nightly.tgz","fileCount":152,"integrity":"sha512-gmwY2wOSBP/TCxP5RjPeqT0lsQvYdlD0shNTIGup8mgIdC1yPWFIAQ4fxbDVwUoVrCGI53mMoGvrKGB1NdJNzA==","signatures":[{"sig":"MEYCIQDGGFq6YW4D4QX2B4pICZZONhNnB4js4QUZvyky8NmaZgIhALm4BHEkdC+ExXEEc1Eyln2tmXI8xpO+7nfdn1NRVA9G","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230607055421-9b20fcaf-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":494700},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230607055421-9b20fcaf-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/8391a35e255990d2ce7a7f818aa0677b/blocksuite-virgo-0.0.0-20230607055421-9b20fcaf-nightly.tgz","_integrity":"sha512-gmwY2wOSBP/TCxP5RjPeqT0lsQvYdlD0shNTIGup8mgIdC1yPWFIAQ4fxbDVwUoVrCGI53mMoGvrKGB1NdJNzA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230607055421-9b20fcaf-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230607055421-9b20fcaf-nightly_1686184076551_0.8511958314721491","host":"s3://npm-registry-packages"}},"0.0.0-20230608095252-955ad210-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230608095252-955ad210-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230608095252-955ad210-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"586ccfa94d438be89656d3747bb4de55eabc8bb8","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230608095252-955ad210-nightly.tgz","fileCount":152,"integrity":"sha512-zDWjZyC6bhSmHi7Puu1YhtwoXI2CyFwBAigAWnJuvaEXlgOmhehPWtiTrmd60g9Go3fiAYkSRVTp+FS3FHGkJA==","signatures":[{"sig":"MEQCIDabkPNC2t9y692NF0p+siQz7pUEJ+3Grhtoo4OnE70UAiAuzvY5Em+Xb4eV/3bEZ6tZGAGiyw5bV7y1e66EbaEJTA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230608095252-955ad210-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":499809},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230608095252-955ad210-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/61dbe4dcbc1578e6d4b38e6c0c91e1cd/blocksuite-virgo-0.0.0-20230608095252-955ad210-nightly.tgz","_integrity":"sha512-zDWjZyC6bhSmHi7Puu1YhtwoXI2CyFwBAigAWnJuvaEXlgOmhehPWtiTrmd60g9Go3fiAYkSRVTp+FS3FHGkJA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230608095252-955ad210-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230608095252-955ad210-nightly_1686270617038_0.2881185383111391","host":"s3://npm-registry-packages"}},"0.0.0-20230609234901-5daa1a6e-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230609234901-5daa1a6e-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230609234901-5daa1a6e-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"534948ad0e99636ff351f66e4a7e48846dad5280","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230609234901-5daa1a6e-nightly.tgz","fileCount":152,"integrity":"sha512-7uYzTegEiBpJM2LfbGxTeVmFpVAbIHdmSJ/hWqXkLTlq+SjAAcGt/xpYuQbvP0hHNt4vuInVD+ivMfjq+iwmig==","signatures":[{"sig":"MEYCIQC3CPkBwAv6xqufHjeDodCpKAGP/jA2PQgznZCeLY6guAIhAOrBs9kAjTLZJ2dM62MrHT6Brbgrobg0lhbZ0WZ3ZmXB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230609234901-5daa1a6e-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":498112},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230609234901-5daa1a6e-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/132765e8a42d80fd7635c4c64d387230/blocksuite-virgo-0.0.0-20230609234901-5daa1a6e-nightly.tgz","_integrity":"sha512-7uYzTegEiBpJM2LfbGxTeVmFpVAbIHdmSJ/hWqXkLTlq+SjAAcGt/xpYuQbvP0hHNt4vuInVD+ivMfjq+iwmig==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230609234901-5daa1a6e-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230609234901-5daa1a6e-nightly_1686356785689_0.6232566688109951","host":"s3://npm-registry-packages"}},"0.0.0-20230610155623-6fd80ccc-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230610155623-6fd80ccc-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230610155623-6fd80ccc-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"ac41f9b40d15092757a24def36e63261dd02014d","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230610155623-6fd80ccc-nightly.tgz","fileCount":152,"integrity":"sha512-I7KeDtjBhNNSl37uxZAqv/VFrLqgU36q+PvjOeJa81MG107IXwPOPOiPm8oh0MFCWhwTIcK1ywh9pnXkZUpFDg==","signatures":[{"sig":"MEUCIQCkAPriEiRMGYrP8Bv/7E20n1Rrr6e/19CLrL57oSrNbQIgMkeM6A/md3dcvJHo43EkIwnjyj6aMZwFuGOMuaVKmu8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230610155623-6fd80ccc-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":498112},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230610155623-6fd80ccc-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/b8624ddfb17e5b9a6b57b02e46f50646/blocksuite-virgo-0.0.0-20230610155623-6fd80ccc-nightly.tgz","_integrity":"sha512-I7KeDtjBhNNSl37uxZAqv/VFrLqgU36q+PvjOeJa81MG107IXwPOPOiPm8oh0MFCWhwTIcK1ywh9pnXkZUpFDg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230610155623-6fd80ccc-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230610155623-6fd80ccc-nightly_1686443399979_0.35406401620498484","host":"s3://npm-registry-packages"}},"0.0.0-20230611085524-052ecf3f-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230611085524-052ecf3f-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230611085524-052ecf3f-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"60d05c580dbf1b77a0b0a671e58b3e2bdbab051c","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230611085524-052ecf3f-nightly.tgz","fileCount":152,"integrity":"sha512-VybX0IhwgXRttnIASJjBdy7RLBtM9CTk9/mQkn/4dEdJziztInKY6AweRdJXSBAW8H5Swhc2XI+d2rHNCZHJIQ==","signatures":[{"sig":"MEYCIQCMZ5YGp1es9U5PLBjl4wfTVS442FZ01J4+3ElCteU9iQIhAK+dr58P+uy23UM360WLf8ceNDMoiXTbwoC9lB/HCW/C","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230611085524-052ecf3f-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":498112},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230611085524-052ecf3f-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/a05a5d1a51781ccdbca2f12f165f1157/blocksuite-virgo-0.0.0-20230611085524-052ecf3f-nightly.tgz","_integrity":"sha512-VybX0IhwgXRttnIASJjBdy7RLBtM9CTk9/mQkn/4dEdJziztInKY6AweRdJXSBAW8H5Swhc2XI+d2rHNCZHJIQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230611085524-052ecf3f-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230611085524-052ecf3f-nightly_1686529749231_0.14787452860069683","host":"s3://npm-registry-packages"}},"0.0.0-20230612125018-7c0d765d-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230612125018-7c0d765d-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230612125018-7c0d765d-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"8816e72cd3e331c1d9a584e6e9547a55c5a4753f","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230612125018-7c0d765d-nightly.tgz","fileCount":162,"integrity":"sha512-EGAjC0ov2xO7GIC04nkgS14eXDR11Gk9S2MC3Tm4q0GjnRVjeVI+8kqh23ncvZMVVarUom2QnpDH00jHx+b3VA==","signatures":[{"sig":"MEQCICMRGWHeFYURJM8lS6cncd7ij4ECuGP3IG9SZfCjxsz8AiAU+0I27ucbD3SuOpTtXNtodGmTLYmKCIJ6hD45FaU9lQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230612125018-7c0d765d-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":549009},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230612125018-7c0d765d-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/321f2cf2ee4fe5d84f9d8606f2dd2d40/blocksuite-virgo-0.0.0-20230612125018-7c0d765d-nightly.tgz","_integrity":"sha512-EGAjC0ov2xO7GIC04nkgS14eXDR11Gk9S2MC3Tm4q0GjnRVjeVI+8kqh23ncvZMVVarUom2QnpDH00jHx+b3VA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230612125018-7c0d765d-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230612125018-7c0d765d-nightly_1686616035894_0.9785186161005435","host":"s3://npm-registry-packages"}},"0.0.0-20230613061606-d9b96e14-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230613061606-d9b96e14-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230613061606-d9b96e14-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"52d4d66094cfed1e50c8480e076c7d5111db639a","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230613061606-d9b96e14-nightly.tgz","fileCount":162,"integrity":"sha512-LVlHBQHvdEGzVRur59Wo7egt2Ww52FLi0kcGbMxc0DHElnxFCFKSRMuRFVoatDgatds9oYbldK/1UGylmMVP1g==","signatures":[{"sig":"MEQCIBbZhywnbgf9s2WrxRClJiFXvac13VYVO4hSt6oKrStQAiAMb1c5N+O6l/dVNrhoP6KEkilMDrsI8I+RyXXwJq09DQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230613061606-d9b96e14-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":549213},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230613061606-d9b96e14-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/4d36e5dc761ff25e9668b86e1d158a20/blocksuite-virgo-0.0.0-20230613061606-d9b96e14-nightly.tgz","_integrity":"sha512-LVlHBQHvdEGzVRur59Wo7egt2Ww52FLi0kcGbMxc0DHElnxFCFKSRMuRFVoatDgatds9oYbldK/1UGylmMVP1g==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230613061606-d9b96e14-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230613061606-d9b96e14-nightly_1686637237720_0.12567193282482125","host":"s3://npm-registry-packages"}},"0.0.0-20230613142146-d72d4600-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230613142146-d72d4600-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230613142146-d72d4600-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"38d033aaaba22d7f45c8fddb0c5dcd9e1d439726","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230613142146-d72d4600-nightly.tgz","fileCount":162,"integrity":"sha512-nM+GAY0snLGuUL+RZxz73HIv/pyXjSsLvTCUvfhf0Xh3cb4EwZo5LLXiVWlTqN0JsILbcKiJ6FIab0zha7HsLw==","signatures":[{"sig":"MEYCIQDNuFK3cc7CdC2GWKrZ+1Sl6h7S5KBqiMHkEXlHoIqDbgIhAIU0uSnzHEcSIFRZF5Oz559BBBVfQ/iS2Py/2J2n7wY1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230613142146-d72d4600-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":551002},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230613142146-d72d4600-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/83ddd021a419aece30e1913f00b1ce57/blocksuite-virgo-0.0.0-20230613142146-d72d4600-nightly.tgz","_integrity":"sha512-nM+GAY0snLGuUL+RZxz73HIv/pyXjSsLvTCUvfhf0Xh3cb4EwZo5LLXiVWlTqN0JsILbcKiJ6FIab0zha7HsLw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230613142146-d72d4600-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230613142146-d72d4600-nightly_1686702362539_0.2464448020137915","host":"s3://npm-registry-packages"}},"0.0.0-20230614221433-c1402d96-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230614221433-c1402d96-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230614221433-c1402d96-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"3c8e2d29742862b70dcbcd7734cbcc8bd767763b","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230614221433-c1402d96-nightly.tgz","fileCount":162,"integrity":"sha512-FKnNUBYlp5DPmVQoBWRALqqk/i8ym2od5sfCg3TNTjfcOxTbhitK/pk5bw5sn1luFXl4h2SoAvIAE10WXenS8Q==","signatures":[{"sig":"MEUCIQDfOEnSUG+bCzzwFR3mQNc6Odn6k9WzQ/ELRTy//bCWqwIgB3Th9OWHWH7S81JywjgBYsFMepD2AVeqNRT7+1FoXWs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230614221433-c1402d96-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":551187},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230614221433-c1402d96-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/15dc4e175a61287c2f0db889178e6db4/blocksuite-virgo-0.0.0-20230614221433-c1402d96-nightly.tgz","_integrity":"sha512-FKnNUBYlp5DPmVQoBWRALqqk/i8ym2od5sfCg3TNTjfcOxTbhitK/pk5bw5sn1luFXl4h2SoAvIAE10WXenS8Q==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230614221433-c1402d96-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230614221433-c1402d96-nightly_1686788899755_0.45184976004236144","host":"s3://npm-registry-packages"}},"0.0.0-20230615114854-2b927ab5-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230615114854-2b927ab5-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230615114854-2b927ab5-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"50e95f188b42c1becb70470765a5ed7cf23f924e","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230615114854-2b927ab5-nightly.tgz","fileCount":162,"integrity":"sha512-92b0Bw72dntBep0OcNzx9ONpM/kv/jh1lFDhtXr3052ogLW/z1PkyFykwuEyyhMQ3Hykk46PKRt7QQvonzWY8g==","signatures":[{"sig":"MEUCIQDOKdIr92cQ76FhjZRhmle+HPk0ZOkljZGUVexwavHXHAIgRNnO2vD5DsTAMZ4H044B4S7zqa7zZFDsy7MPl2GOpVQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230615114854-2b927ab5-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":568891},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230615114854-2b927ab5-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/003213573116d51a314105cd7e24b2e2/blocksuite-virgo-0.0.0-20230615114854-2b927ab5-nightly.tgz","_integrity":"sha512-92b0Bw72dntBep0OcNzx9ONpM/kv/jh1lFDhtXr3052ogLW/z1PkyFykwuEyyhMQ3Hykk46PKRt7QQvonzWY8g==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230615114854-2b927ab5-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230615114854-2b927ab5-nightly_1686875300353_0.6357545157501077","host":"s3://npm-registry-packages"}},"0.0.0-20230616172700-720da7d7-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230616172700-720da7d7-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230616172700-720da7d7-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"e08197c836c643270d76c2c4f83fe55525eea531","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230616172700-720da7d7-nightly.tgz","fileCount":162,"integrity":"sha512-MDwKeetp2wkKwQvMH42blOYnk3yUVpSX4knK/XDNKlu3rlbcXjrWkDhkVBEGxQ5be7fnQC+K8ggnIM8f7wAGuA==","signatures":[{"sig":"MEUCIQCnXIqdRLdVia8tjlSg/NBVtjT0ONpMXLRVd6+4u5w2JQIgXq0nEzQ/ekVfNWDlM8yjwDw51ifSHiGRj2YAsM9ODWg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230616172700-720da7d7-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":569023},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230616172700-720da7d7-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/46d090f8e7f4fc7ec49e63bcddc27690/blocksuite-virgo-0.0.0-20230616172700-720da7d7-nightly.tgz","_integrity":"sha512-MDwKeetp2wkKwQvMH42blOYnk3yUVpSX4knK/XDNKlu3rlbcXjrWkDhkVBEGxQ5be7fnQC+K8ggnIM8f7wAGuA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230616172700-720da7d7-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230616172700-720da7d7-nightly_1686961557566_0.3065069968816736","host":"s3://npm-registry-packages"}},"0.0.0-20230617112728-96046bd8-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230617112728-96046bd8-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230617112728-96046bd8-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"cc85c8b07d0f4b22ec82c378e580c216660fc213","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230617112728-96046bd8-nightly.tgz","fileCount":162,"integrity":"sha512-q1JX52amdfSeUF9OvnjUGMp53/rECmUOGFvTsoi2woMAO5CEP5Pk10HEh4ucEFNSSZB+iellZkxj4J+hpFMDfA==","signatures":[{"sig":"MEYCIQCnVVLflBqDta/s0lDx775sVg5Tddlt+t07i/CZz6HzngIhALAE91q6sceWFXq1i4Vn+KPw1yFzEN3KIiT3hLeDJ1cg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230617112728-96046bd8-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":568617},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230617112728-96046bd8-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/6bc0fd4f0678113004097654a63a3604/blocksuite-virgo-0.0.0-20230617112728-96046bd8-nightly.tgz","_integrity":"sha512-q1JX52amdfSeUF9OvnjUGMp53/rECmUOGFvTsoi2woMAO5CEP5Pk10HEh4ucEFNSSZB+iellZkxj4J+hpFMDfA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230617112728-96046bd8-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230617112728-96046bd8-nightly_1687048249348_0.5505819104824254","host":"s3://npm-registry-packages"}},"0.0.0-20230618093321-05c37038-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230618093321-05c37038-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230618093321-05c37038-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"3c709aeaac804c76637b914ef0969664ee34b9f8","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230618093321-05c37038-nightly.tgz","fileCount":162,"integrity":"sha512-yc1Rp8289n1AYdHpSYMaejWravJCThTUn44sT/dO2xvJj/DjuzJQlNyXNKIy0avoi9iwDYBrzBah97P3kJ8Nxw==","signatures":[{"sig":"MEQCIBfU/+8Ej+ggMelI5BIQbye5ukDSGigBXCInM09IArXxAiB+TGDpYueZijfM/Lt/N3eWC6U19eewPYeMS2R2gCopEQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230618093321-05c37038-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":570603},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230618093321-05c37038-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/9ae504d47fc9f2e8f8696962b86bf1f9/blocksuite-virgo-0.0.0-20230618093321-05c37038-nightly.tgz","_integrity":"sha512-yc1Rp8289n1AYdHpSYMaejWravJCThTUn44sT/dO2xvJj/DjuzJQlNyXNKIy0avoi9iwDYBrzBah97P3kJ8Nxw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230618093321-05c37038-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230618093321-05c37038-nightly_1687134471971_0.5962035922912607","host":"s3://npm-registry-packages"}},"0.0.0-20230619093341-b1b8714a-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230619093341-b1b8714a-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230619093341-b1b8714a-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"93dd8283357b3e80d43dd25df63ef015e32722b2","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230619093341-b1b8714a-nightly.tgz","fileCount":162,"integrity":"sha512-VxedySQ1Ph+tymK1upv7Xr+RYzA527n5Edg0QKC3puPY7a3qWkEWTKkxHqBqKNj7CdXzIPjkEjmq1duzRhtxDA==","signatures":[{"sig":"MEUCIQDSRBHpSml7iu3gFSytIdkgmWjtfZ66glZxyK6phxjzpAIgHBxcgSCJejddefRVpzazgsLEg6WvuHbdQQ7bDJGfJfw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230619093341-b1b8714a-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":570809},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230619093341-b1b8714a-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/dd8082e7d995618243524c8c538d97b3/blocksuite-virgo-0.0.0-20230619093341-b1b8714a-nightly.tgz","_integrity":"sha512-VxedySQ1Ph+tymK1upv7Xr+RYzA527n5Edg0QKC3puPY7a3qWkEWTKkxHqBqKNj7CdXzIPjkEjmq1duzRhtxDA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230619093341-b1b8714a-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230619093341-b1b8714a-nightly_1687220780575_0.34673846228921335","host":"s3://npm-registry-packages"}},"0.0.0-20230620053632-def836c5-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230620053632-def836c5-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230620053632-def836c5-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"f9d7b03ce7cd1769d1c0a8751f83464a6de0c648","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230620053632-def836c5-nightly.tgz","fileCount":162,"integrity":"sha512-4FdUTBIye1n4epHaDx+fQL7jtYgOSIl6FWqawslN0pefKCqfXG0ExOOwu4MRxSuCUVQwrJ7gQL7EihwXx6iBFg==","signatures":[{"sig":"MEYCIQCJhlMS94EKzNMwTiujdrEIbWYhkNGYRzV7p1cyfbrOfgIhALanJ9hdkUzeyuJ0hUZq+TZ0ozdwn7/4WLlUH62UTtah","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230620053632-def836c5-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":570426},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230620053632-def836c5-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/b851e6bf33235d259de4149abe684b0a/blocksuite-virgo-0.0.0-20230620053632-def836c5-nightly.tgz","_integrity":"sha512-4FdUTBIye1n4epHaDx+fQL7jtYgOSIl6FWqawslN0pefKCqfXG0ExOOwu4MRxSuCUVQwrJ7gQL7EihwXx6iBFg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230620053632-def836c5-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230620053632-def836c5-nightly_1687242253042_0.31258868219531655","host":"s3://npm-registry-packages"}},"0.0.0-20230620110032-d8041266-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230620110032-d8041266-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230620110032-d8041266-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"796b3941c13214dd3fc6a761ea25230bfa8d24fb","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230620110032-d8041266-nightly.tgz","fileCount":162,"integrity":"sha512-0szArGYfe2qp4FTvcylp2PEa573jmFuE/hpbBOJZzoyc8s8BLMKyPkpKv8JNRl+TmCAlACmlnTUUVyxND+F5rw==","signatures":[{"sig":"MEYCIQDwICFwdlEr/n8OuNe/9WtCtSa3iQJjNHMJqdaZpXHwDgIhAJMvblBECRdG52TfAm97/j1nU8N7S49go2YXxDSPZQBa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230620110032-d8041266-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":570961},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230620110032-d8041266-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/9e59cbaa0c51d9b149eaedd96dcc5045/blocksuite-virgo-0.0.0-20230620110032-d8041266-nightly.tgz","_integrity":"sha512-0szArGYfe2qp4FTvcylp2PEa573jmFuE/hpbBOJZzoyc8s8BLMKyPkpKv8JNRl+TmCAlACmlnTUUVyxND+F5rw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230620110032-d8041266-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230620110032-d8041266-nightly_1687259540069_0.5458576211448418","host":"s3://npm-registry-packages"}},"0.0.0-20230620132953-c8a7dfc3-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230620132953-c8a7dfc3-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230620132953-c8a7dfc3-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"976263cf5867878d2b87bc1cd0a79ea2eb31f4a4","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230620132953-c8a7dfc3-nightly.tgz","fileCount":162,"integrity":"sha512-1YQyTgHkijtOeMJCUVuUbsLnPNRYOAmtX8gOLrLSYyffrVezCmvOkKMgWjn0RrnUKEt/zTac/rH8arZUBUBF7Q==","signatures":[{"sig":"MEUCIB8n3EUBaZCjwRun5pu3aLHZ5DosfJCnXJc/svHV8KHVAiEA6kYlfBqZc1pRP/WmQHW/7DGZxQcgKOHXFIUaSjkfvxM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230620132953-c8a7dfc3-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":571229},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230620132953-c8a7dfc3-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/0cb82c3f4eb41c515eef40f1bc144a1b/blocksuite-virgo-0.0.0-20230620132953-c8a7dfc3-nightly.tgz","_integrity":"sha512-1YQyTgHkijtOeMJCUVuUbsLnPNRYOAmtX8gOLrLSYyffrVezCmvOkKMgWjn0RrnUKEt/zTac/rH8arZUBUBF7Q==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230620132953-c8a7dfc3-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230620132953-c8a7dfc3-nightly_1687307456498_0.2819312599059707","host":"s3://npm-registry-packages"}},"0.0.0-20230621121334-ea56da5c-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230621121334-ea56da5c-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230621121334-ea56da5c-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"b3200e1710d5b0494d78dc2e21f19c6d1303c065","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230621121334-ea56da5c-nightly.tgz","fileCount":162,"integrity":"sha512-hrmk/2E5/L6suka//gyH7suYmjVajQ1e/ENb9QamQeo56E+IJ+5ZSB+yRCZ1gDzPu8v7q8ejVGaAYiRpG+E/EA==","signatures":[{"sig":"MEQCICSg8JXkoWUGeb+hZhtcjug7FXlUrzeik2WrGa1a69HiAiA3n5rHAyEEyq4qQMgNtXXWSdV/aeTU0yRuw/VpU+F8Sg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230621121334-ea56da5c-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":572233},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230621121334-ea56da5c-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/a040f23aa57f863e93bfe29c756c27aa/blocksuite-virgo-0.0.0-20230621121334-ea56da5c-nightly.tgz","_integrity":"sha512-hrmk/2E5/L6suka//gyH7suYmjVajQ1e/ENb9QamQeo56E+IJ+5ZSB+yRCZ1gDzPu8v7q8ejVGaAYiRpG+E/EA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230621121334-ea56da5c-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230621121334-ea56da5c-nightly_1687357914079_0.18782173536195867","host":"s3://npm-registry-packages"}},"0.0.0-20230622044943-68a3188d-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230622044943-68a3188d-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230622044943-68a3188d-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"34d439863d8e75ba53c93beb8c5630231e827609","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230622044943-68a3188d-nightly.tgz","fileCount":162,"integrity":"sha512-ecktRhjPnMMQavANydcxYC+3mwOAELdIbf3F57toDZSMXX3iqDTmQG5Q0w5ull3cXd3pfIG5aIu3C3Ia3cd4lw==","signatures":[{"sig":"MEUCIQCUZvh992A5PeSScPomsIJZOjFIio3y6DArb4Y0R743YgIgB2cHcMWeSfDMgkrbsPmIuXC1vTdkKjmXSZbruRWoSX0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230622044943-68a3188d-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":572233},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230622044943-68a3188d-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/9751e6ce1de98ddab5b220e15de9eb4e/blocksuite-virgo-0.0.0-20230622044943-68a3188d-nightly.tgz","_integrity":"sha512-ecktRhjPnMMQavANydcxYC+3mwOAELdIbf3F57toDZSMXX3iqDTmQG5Q0w5ull3cXd3pfIG5aIu3C3Ia3cd4lw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230622044943-68a3188d-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230622044943-68a3188d-nightly_1687409635070_0.7853667420104888","host":"s3://npm-registry-packages"}},"0.0.0-20230622140410-30eb2b91-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230622140410-30eb2b91-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230622140410-30eb2b91-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"5cfdb24bd74ff5f3a0879169fde6a9ac16e81326","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230622140410-30eb2b91-nightly.tgz","fileCount":162,"integrity":"sha512-hl+5Oy4Mox6Hzxt7PTfmEo9iaRSBr4YJd5lYZOqPcEvXGU4dLd6L7X8H8Ug+dax/9Z4Okx8+LpT6GvgAuQjzcg==","signatures":[{"sig":"MEUCIESR/gicRAoJKyOERUF1+dE5D/W3I5h62y0WZjin+Vi6AiEA6V+Ws8Z00mGvF7/JeVY6ULqZPf5sAZ6iyLs7bUx61BQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230622140410-30eb2b91-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":572233},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230622140410-30eb2b91-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/7dbd8acbaab7b5943abd21a5c3a2757b/blocksuite-virgo-0.0.0-20230622140410-30eb2b91-nightly.tgz","_integrity":"sha512-hl+5Oy4Mox6Hzxt7PTfmEo9iaRSBr4YJd5lYZOqPcEvXGU4dLd6L7X8H8Ug+dax/9Z4Okx8+LpT6GvgAuQjzcg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230622140410-30eb2b91-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.0"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230622140410-30eb2b91-nightly_1687480340812_0.8594405934595906","host":"s3://npm-registry-packages"}},"0.0.0-20230623185501-1697f9ce-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230623185501-1697f9ce-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230623185501-1697f9ce-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"d4212ea4e5bf6a8602a297922f59e8ea418f23d9","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230623185501-1697f9ce-nightly.tgz","fileCount":162,"integrity":"sha512-2v7U227cdPpK/dJpNynONnp1nMacGLlDnfCb6tQVczNNfFSAUXf8GakualEjysI3kerprSuFtzwWfpQ+rihpYQ==","signatures":[{"sig":"MEUCIQDKZOzpeW1Hzucue956YaFYRNpftULQ/Yvt1o3iWgVRAQIgR5yKVOJmfFncrPlQjgUxRNvB4p+2+Z2021VWXXJfGt4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230623185501-1697f9ce-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":572210},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230623185501-1697f9ce-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/35c9dd00c274bbcbfc0ca95e68446761/blocksuite-virgo-0.0.0-20230623185501-1697f9ce-nightly.tgz","_integrity":"sha512-2v7U227cdPpK/dJpNynONnp1nMacGLlDnfCb6tQVczNNfFSAUXf8GakualEjysI3kerprSuFtzwWfpQ+rihpYQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230623185501-1697f9ce-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.5"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230623185501-1697f9ce-nightly_1687566646062_0.544213179433344","host":"s3://npm-registry-packages"}},"0.0.0-20230624133730-3d47c8c8-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230624133730-3d47c8c8-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230624133730-3d47c8c8-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"ea9589f55bf89050790a2202b55a7cd26f541f88","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230624133730-3d47c8c8-nightly.tgz","fileCount":162,"integrity":"sha512-meJV2eunpK8PVMtnmR7gRLXiwi6ht10APN7841uiyx6T7orWX+AA+te3c0VPF2vu4rxBEGu9Gw6ieDZYxmQnZw==","signatures":[{"sig":"MEYCIQDgwLl1mihBrVJhnV2ldhLRCJRxknMrL7ay7IsTdrIAhgIhAJbF+nWnVDpFcN3ac6SJTWxRGfHJ8ow5TgmTBHlbP0Pe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230624133730-3d47c8c8-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":572210},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230624133730-3d47c8c8-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/724896506bc67362ea439b5dc3151da2/blocksuite-virgo-0.0.0-20230624133730-3d47c8c8-nightly.tgz","_integrity":"sha512-meJV2eunpK8PVMtnmR7gRLXiwi6ht10APN7841uiyx6T7orWX+AA+te3c0VPF2vu4rxBEGu9Gw6ieDZYxmQnZw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230624133730-3d47c8c8-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.5"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230624133730-3d47c8c8-nightly_1687614060635_0.6622165593377611","host":"s3://npm-registry-packages"}},"0.0.0-20230624135813-f26651e5-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230624135813-f26651e5-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230624135813-f26651e5-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"4cce6ff64959a0c05d437be1b3c350d0c637a141","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230624135813-f26651e5-nightly.tgz","fileCount":162,"integrity":"sha512-ETNT/lq97unZrXErWbRkQSi7QmeRSkpbu6TLBDdX5v7j+rFIvLg9kAsphIhBA7O5E8rlJhxsjTDWUrchJ++oXQ==","signatures":[{"sig":"MEQCIDtEmKmakzcjySoZZ7qiYf0gxDWpguOovcQgwF+xWkQYAiAvO79jLRUeX2vBn+x99uxEXmxSnr+WQifM1SmjIlkN3g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230624135813-f26651e5-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":572210},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230624135813-f26651e5-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/aa610a63e485e195e9c5bf81d56faef7/blocksuite-virgo-0.0.0-20230624135813-f26651e5-nightly.tgz","_integrity":"sha512-ETNT/lq97unZrXErWbRkQSi7QmeRSkpbu6TLBDdX5v7j+rFIvLg9kAsphIhBA7O5E8rlJhxsjTDWUrchJ++oXQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230624135813-f26651e5-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.5"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230624135813-f26651e5-nightly_1687615309256_0.7437764106909102","host":"s3://npm-registry-packages"}},"0.0.0-20230624145145-2fc312f1-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230624145145-2fc312f1-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230624145145-2fc312f1-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"bc23cbfe3b1e48cf0bb6d3bd26ef5957863bf665","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230624145145-2fc312f1-nightly.tgz","fileCount":162,"integrity":"sha512-+pGAq0JoC+YUs7Tzd9Pn5B/MqrMu/EmjWXmR9rxJGTJObTNi0y9hxzu+r7dXTzZkUmfhD/ecuN7eGKQfd8HGHQ==","signatures":[{"sig":"MEUCIQCNzkaLFMnHT1zBBGiXNI0mP7F1dYZRE7GmPFJem3aYJgIgZ5km+vbm+FsUidMfoYzYpzEQyIXiNebvKdfC4vyfmAM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230624145145-2fc312f1-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":572210},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230624145145-2fc312f1-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/eb7606f78311fba02d376f3f1b02a305/blocksuite-virgo-0.0.0-20230624145145-2fc312f1-nightly.tgz","_integrity":"sha512-+pGAq0JoC+YUs7Tzd9Pn5B/MqrMu/EmjWXmR9rxJGTJObTNi0y9hxzu+r7dXTzZkUmfhD/ecuN7eGKQfd8HGHQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230624145145-2fc312f1-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.5"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230624145145-2fc312f1-nightly_1687618489126_0.541918354453873","host":"s3://npm-registry-packages"}},"0.0.0-20230624151714-10e3e0be-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230624151714-10e3e0be-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230624151714-10e3e0be-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"cc069b3e2a7123e1d1b437967513a19a7eaed0b8","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230624151714-10e3e0be-nightly.tgz","fileCount":162,"integrity":"sha512-Os9TG+gpU6/RpcfYebW2tB6FtLziyH2uPExSXO76XYwTbKKLtmSsWOXVW6og28q2IDvOwe9TAGO6/8SvvJrCdg==","signatures":[{"sig":"MEYCIQD2kNYt4nwPcCrWoDV2p/T9j4uhJAh+NPuLKG0CFcNafAIhAPUXphe8VSwl2o00ctrKGa1oCWuH/C13rrG/nuGP/wUN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230624151714-10e3e0be-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":572210},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230624151714-10e3e0be-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/f043e5c8055ab5c7ffa4328433e8c9bd/blocksuite-virgo-0.0.0-20230624151714-10e3e0be-nightly.tgz","_integrity":"sha512-Os9TG+gpU6/RpcfYebW2tB6FtLziyH2uPExSXO76XYwTbKKLtmSsWOXVW6og28q2IDvOwe9TAGO6/8SvvJrCdg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230624151714-10e3e0be-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.5"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230624151714-10e3e0be-nightly_1687620037738_0.8664966914174856","host":"s3://npm-registry-packages"}},"0.0.0-20230624163241-751f7170-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230624163241-751f7170-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230624163241-751f7170-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"86e80e31f22ac26487205c738c46f4aec9ebeeb4","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230624163241-751f7170-nightly.tgz","fileCount":162,"integrity":"sha512-70DRG3Iu3LjumdrPbzrcv40o97imSB5vtdXlENEsB7oOP/Ea+vOXql/ziyC3+V316h/xux/lZLpSyWn+ZjRdug==","signatures":[{"sig":"MEUCIQDjudr/gqvoxGIanXhIWoVkkW/RnCm+aZlh9cbAxQLk0QIgazGLoGkSiXcigIgGntJxxfjkAArG9SiuQx5Ma+AO1J0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230624163241-751f7170-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":572210},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230624163241-751f7170-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/986931fd427e36b00bd5aaa9ef334738/blocksuite-virgo-0.0.0-20230624163241-751f7170-nightly.tgz","_integrity":"sha512-70DRG3Iu3LjumdrPbzrcv40o97imSB5vtdXlENEsB7oOP/Ea+vOXql/ziyC3+V316h/xux/lZLpSyWn+ZjRdug==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230624163241-751f7170-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.5"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230624163241-751f7170-nightly_1687624756866_0.45392584813762205","host":"s3://npm-registry-packages"}},"0.0.0-20230626181619-90507cfc-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230626181619-90507cfc-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230626181619-90507cfc-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"280dfe9d13b12dad4233249546108a3e7a3200b0","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230626181619-90507cfc-nightly.tgz","fileCount":162,"integrity":"sha512-Xwa4F/uxegPI8lmbxDuaZYA1ClpJcNmL2YUzD/XRQwPiAh8y5evlzoI+fZfXRNrjgRq+HEHq0SZeGxtRSStdjQ==","signatures":[{"sig":"MEQCIE6omtOjZYL20GEj+zbUaa+oxyyvvtJjpJbZPPdZ2ZWTAiAGcUTVmm7zBg2E4e1T9vbn1Z+6J3H0lkQjDffmVgRJCA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230626181619-90507cfc-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":572922},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230626181619-90507cfc-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/426868f1d6cbb4c43c0f91d46334752f/blocksuite-virgo-0.0.0-20230626181619-90507cfc-nightly.tgz","_integrity":"sha512-Xwa4F/uxegPI8lmbxDuaZYA1ClpJcNmL2YUzD/XRQwPiAh8y5evlzoI+fZfXRNrjgRq+HEHq0SZeGxtRSStdjQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230626181619-90507cfc-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.5"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230626181619-90507cfc-nightly_1687825799931_0.8607100433477477","host":"s3://npm-registry-packages"}},"0.0.0-20230627102054-b712dd6c-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230627102054-b712dd6c-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230627102054-b712dd6c-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"cba4ecb640a95d42dc4873536bb37337c20f9d76","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230627102054-b712dd6c-nightly.tgz","fileCount":162,"integrity":"sha512-3EGSlj+W2vVgp1D23sy7OMwQav0mMxnVXT7T8zyXi9htG8GEZ8WfpIc16rPDwvlzWcaj1jTNFkD+oa13xNnDSA==","signatures":[{"sig":"MEUCIC2MyqWlGrnEhzc/uxqCMJaZDPIMI/SR4Yn0tpUqT9PFAiEA4wslsRCbTSPF13HyHczHHR4b7G0OKXrsuCaGuwJBksA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230627102054-b712dd6c-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":571799},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230627102054-b712dd6c-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/5db5a92b7e00a1c9a1cdc6dfe4516032/blocksuite-virgo-0.0.0-20230627102054-b712dd6c-nightly.tgz","_integrity":"sha512-3EGSlj+W2vVgp1D23sy7OMwQav0mMxnVXT7T8zyXi9htG8GEZ8WfpIc16rPDwvlzWcaj1jTNFkD+oa13xNnDSA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230627102054-b712dd6c-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.5"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230627102054-b712dd6c-nightly_1687862519699_0.04076224998838884","host":"s3://npm-registry-packages"}},"0.0.0-20230627154918-4c642938-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230627154918-4c642938-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230627154918-4c642938-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"23261126b640cb9f9c4c8110faab0b050cf01073","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230627154918-4c642938-nightly.tgz","fileCount":162,"integrity":"sha512-qNBsoSFOsKcwKT993e7ob8LU+hROhbrXD6zajAjSqfWjGqJiNlrB0v6Yva4dvFdlwIxP4/XM9MREwq1plw0f0Q==","signatures":[{"sig":"MEUCIQDD6yMCyrUxvOx16PCKiqj5NxsAy28YIh35pMv3UTIjiQIgcuYIvjCc6htP66E8RZXNvxZw/sM212g1j662LvUP0X4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230627154918-4c642938-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":571777},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230627154918-4c642938-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/24d5cf04c6cabe7c9423a92429f68a67/blocksuite-virgo-0.0.0-20230627154918-4c642938-nightly.tgz","_integrity":"sha512-qNBsoSFOsKcwKT993e7ob8LU+hROhbrXD6zajAjSqfWjGqJiNlrB0v6Yva4dvFdlwIxP4/XM9MREwq1plw0f0Q==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230627154918-4c642938-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.5"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230627154918-4c642938-nightly_1687881475881_0.5997365286616465","host":"s3://npm-registry-packages"}},"0.0.0-20230627165830-836e6fd1-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230627165830-836e6fd1-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230627165830-836e6fd1-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"5d35b1827cb44828ad60549e31d5272f99d08ee5","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230627165830-836e6fd1-nightly.tgz","fileCount":162,"integrity":"sha512-GMx7lKLovShHt3f07j0NNZrN0kTNZUUFjjZMbqVdz7aK3HbEoJEBbdSwbsI9L7fGkQc4WPabAqHEQaWf2SO7uQ==","signatures":[{"sig":"MEUCIEMhlxWJ9vPu4WD87FKptQYlcOSt6uv39BCPIGy+7h+GAiEA5lNRD45szONhyZhrRTfDyYcDu5hD+ukr1Y9drhDyLxY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230627165830-836e6fd1-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":572708},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230627165830-836e6fd1-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/63930eacdaf3fee82bbf611cb58f39cd/blocksuite-virgo-0.0.0-20230627165830-836e6fd1-nightly.tgz","_integrity":"sha512-GMx7lKLovShHt3f07j0NNZrN0kTNZUUFjjZMbqVdz7aK3HbEoJEBbdSwbsI9L7fGkQc4WPabAqHEQaWf2SO7uQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230627165830-836e6fd1-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.5"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230627165830-836e6fd1-nightly_1687885334911_0.9691272868897367","host":"s3://npm-registry-packages"}},"0.0.0-20230628134028-bff5cb08-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230628134028-bff5cb08-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230628134028-bff5cb08-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"b6ab54d82f0fe9c231c7a6b7f59218348635dd2c","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230628134028-bff5cb08-nightly.tgz","fileCount":162,"integrity":"sha512-eOkDrClkLm3ul/9VTJKA+e5QERZKDzTV0iLhFT9VmwDhF3FvTfTqqJUL4kGR/8I9E0X2nDBs85uDm1ddPukQyg==","signatures":[{"sig":"MEUCIQCqH8m+3TWgCely9dWafF9+wF0IlvAhyifvlNhnvcnsmAIgedNv8j/p5QswNDoNDGGBc2rVz4QvgiXPTzIkPPhiOag=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230628134028-bff5cb08-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":573375},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230628134028-bff5cb08-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/93130fbdf0a9cd214d24901942e2254f/blocksuite-virgo-0.0.0-20230628134028-bff5cb08-nightly.tgz","_integrity":"sha512-eOkDrClkLm3ul/9VTJKA+e5QERZKDzTV0iLhFT9VmwDhF3FvTfTqqJUL4kGR/8I9E0X2nDBs85uDm1ddPukQyg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230628134028-bff5cb08-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.5"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230628134028-bff5cb08-nightly_1687983348681_0.47826064426022863","host":"s3://npm-registry-packages"}},"0.0.0-20230629084521-542de4e8-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230629084521-542de4e8-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230629084521-542de4e8-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"2409908647ff71912e0986915fe9409af8bb28ed","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230629084521-542de4e8-nightly.tgz","fileCount":162,"integrity":"sha512-wohY02sDkNS3ZuN6TD0Bptok2he8JmlCFUtV69QRwhs5r5m6KPNAK/68dI+DqIVLECt63Ot3v8VEC7vMeSDa2g==","signatures":[{"sig":"MEYCIQChQvX/ePKmWMQsY8R1XyLyWClN7KqaFWi1va0uUOsvbwIhANmcUcN3NLKG6WnSKtFkQD342pbkeKWCOZvg7CfjXWyQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230629084521-542de4e8-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":576067},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230629084521-542de4e8-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/573524025c25da07c40453ee5e00d7b0/blocksuite-virgo-0.0.0-20230629084521-542de4e8-nightly.tgz","_integrity":"sha512-wohY02sDkNS3ZuN6TD0Bptok2he8JmlCFUtV69QRwhs5r5m6KPNAK/68dI+DqIVLECt63Ot3v8VEC7vMeSDa2g==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230629084521-542de4e8-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.5"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230629084521-542de4e8-nightly_1688029361977_0.6423069418182674","host":"s3://npm-registry-packages"}},"0.0.0-20230629103121-76e6587d-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230629103121-76e6587d-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230629103121-76e6587d-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"b6064c459d805727876a5e820ecd74cf6c3ba0d9","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230629103121-76e6587d-nightly.tgz","fileCount":162,"integrity":"sha512-fPRACAW7EcFb1CEfyqkV4ZPL1wKhfIQfvL2lltxy8D7Z3Pvvy0k7AgsqGK1Oa/lU86+6SD4mf7McWsqzn3R8wg==","signatures":[{"sig":"MEYCIQD/cE+uT/5QVUsKUmNXvQVBltuRtokToJYxfXDdqo2lbAIhAK7UNoap8U9XFIuItv6I5VbFc0h1Q5DaBEBEbx4EYOiR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230629103121-76e6587d-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":575152},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230629103121-76e6587d-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/e51f05eec6dd21bb8d463061b3955a8d/blocksuite-virgo-0.0.0-20230629103121-76e6587d-nightly.tgz","_integrity":"sha512-fPRACAW7EcFb1CEfyqkV4ZPL1wKhfIQfvL2lltxy8D7Z3Pvvy0k7AgsqGK1Oa/lU86+6SD4mf7McWsqzn3R8wg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230629103121-76e6587d-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.5"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230629103121-76e6587d-nightly_1688085026648_0.7791616555929612","host":"s3://npm-registry-packages"}},"0.0.0-20230630081054-55a25248-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230630081054-55a25248-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230630081054-55a25248-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"9c24dd1ab460a4f82ba1469771a8a230c7f8920d","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230630081054-55a25248-nightly.tgz","fileCount":162,"integrity":"sha512-1NdamgS6dOWtyDTdA6ATjX9r7HGIqfCPeXz5QgpThAMbKesGvmMhDeg4H9PNnz/sAG6CqXHSENdXzV5JC5/BmA==","signatures":[{"sig":"MEUCIFk6MUWtje5RvAHuwpLildSR6d+DtI7YUHVIXIZe3UJaAiEAo9DZ1UIhHPoUQUVVQJtBeedcDxfKNP/7Xi+hi24bNAQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230630081054-55a25248-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":575266},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230630081054-55a25248-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/c2d85979c89afea267d330cf85707341/blocksuite-virgo-0.0.0-20230630081054-55a25248-nightly.tgz","_integrity":"sha512-1NdamgS6dOWtyDTdA6ATjX9r7HGIqfCPeXz5QgpThAMbKesGvmMhDeg4H9PNnz/sAG6CqXHSENdXzV5JC5/BmA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230630081054-55a25248-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.5"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230630081054-55a25248-nightly_1688112877240_0.5163312328763199","host":"s3://npm-registry-packages"}},"0.0.0-20230701000557-1e62fe40-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230701000557-1e62fe40-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230701000557-1e62fe40-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"58890444e423c0bdea33116d7478549a098e8e8f","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230701000557-1e62fe40-nightly.tgz","fileCount":162,"integrity":"sha512-uhatCOcXfmlMU0U68xoBcscWpK7mfgt81Gj1rfOMJY3w6BRap7q0TCJjQgmYEgVnZlWToY5OtGn55Pg0rm6W7w==","signatures":[{"sig":"MEYCIQCtbiSZXC4etcN02MAviQaNQohwn+sjZNdkIMMplmEEiAIhAJlDvR/TBWUUp/0gGYFobK2GY3ycRtR0siRPvzVWaLp+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230701000557-1e62fe40-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":575507},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230701000557-1e62fe40-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/8f2cc51061e47f993f59bda848660b9a/blocksuite-virgo-0.0.0-20230701000557-1e62fe40-nightly.tgz","_integrity":"sha512-uhatCOcXfmlMU0U68xoBcscWpK7mfgt81Gj1rfOMJY3w6BRap7q0TCJjQgmYEgVnZlWToY5OtGn55Pg0rm6W7w==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230701000557-1e62fe40-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.5"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230701000557-1e62fe40-nightly_1688171584479_0.36833020893367285","host":"s3://npm-registry-packages"}},"0.0.0-20230702013906-50f93499-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230702013906-50f93499-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230702013906-50f93499-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"d92411ced9a7ee0e2728eda564d5cd1c64e7f1f8","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230702013906-50f93499-nightly.tgz","fileCount":162,"integrity":"sha512-EMlO8PTYg0o7L3Xd5zUWCULabu22WnccfTNOga1M/+x3M/bP4monBIb1viAeJ878L1C4SnO2WPj/y6JkTyA18Q==","signatures":[{"sig":"MEYCIQDQ7hoZHVAhSxbPmsxz63LkEFjIzZmAItgHdw1cH9M/2AIhAMchvCj1enIZxBJtmshKvb5Q/f+jGvdXYYKNqzrZ4Ay2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230702013906-50f93499-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":575507},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230702013906-50f93499-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/c1d02f4794560a0ac516a301a6fe9199/blocksuite-virgo-0.0.0-20230702013906-50f93499-nightly.tgz","_integrity":"sha512-EMlO8PTYg0o7L3Xd5zUWCULabu22WnccfTNOga1M/+x3M/bP4monBIb1viAeJ878L1C4SnO2WPj/y6JkTyA18Q==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230702013906-50f93499-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.5"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230702013906-50f93499-nightly_1688278406123_0.26068342345107354","host":"s3://npm-registry-packages"}},"0.0.0-20230703162815-336f855b-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230703162815-336f855b-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230703162815-336f855b-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"b1b86d2c4fb83ffdbd0aae980e0384988f33e895","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230703162815-336f855b-nightly.tgz","fileCount":162,"integrity":"sha512-3ypTdl5rUULhpOpUGTW9WxOR2LIozZIW3II1GXQYg2Pva4cPJVp2hV/nEByZfW8zM3vBxCE1BOWFmmg8rRg0hA==","signatures":[{"sig":"MEUCIQCw3Wfz6sU1EBd1huWOoMIaNBbtKXGLj2IRWeafnWc3MAIgK4y+oXvqKEx0CEe5l7hG5Fhjjat1WstN+gN4GIbuZtg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230703162815-336f855b-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":575565},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230703162815-336f855b-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/91eb8d65d7ec44316aded792de096772/blocksuite-virgo-0.0.0-20230703162815-336f855b-nightly.tgz","_integrity":"sha512-3ypTdl5rUULhpOpUGTW9WxOR2LIozZIW3II1GXQYg2Pva4cPJVp2hV/nEByZfW8zM3vBxCE1BOWFmmg8rRg0hA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230703162815-336f855b-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.5"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230703162815-336f855b-nightly_1688430638386_0.9090832745595812","host":"s3://npm-registry-packages"}},"0.0.0-20230704023331-d9fc4854-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230704023331-d9fc4854-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230704023331-d9fc4854-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"9e4e400f109f2d8d3d84a040c55feb6b4eb70470","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230704023331-d9fc4854-nightly.tgz","fileCount":162,"integrity":"sha512-b/FD/gBO3TaMtDHGjJv3znvrvQPCfMqgeCljrD9Uns32tEQyFx1DZy44BmssivVGrNU9rzGX4srKacfu9CQvwQ==","signatures":[{"sig":"MEQCIBYLkD39UohALk5gKAkS6XdJ+MUg9f6tS3QKVXaJvPfaAiB1q03Sgojukxp0s6ujdAeZNiFpo1ajh5r9IX1ic+wgWg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230704023331-d9fc4854-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":575565},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230704023331-d9fc4854-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/076931030a34da0deb8f13a537b8447f/blocksuite-virgo-0.0.0-20230704023331-d9fc4854-nightly.tgz","_integrity":"sha512-b/FD/gBO3TaMtDHGjJv3znvrvQPCfMqgeCljrD9Uns32tEQyFx1DZy44BmssivVGrNU9rzGX4srKacfu9CQvwQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230704023331-d9fc4854-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.5"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230704023331-d9fc4854-nightly_1688451021862_0.3454973996344868","host":"s3://npm-registry-packages"}},"0.0.0-20230704115754-19bc6fae-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230704115754-19bc6fae-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230704115754-19bc6fae-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"97b56b759abb1b3e53b9167c48376d3adde22e12","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230704115754-19bc6fae-nightly.tgz","fileCount":162,"integrity":"sha512-78RH7LQMA+OyqkmD8yi+PN0p1hDFWhEHoV844Dx228y9K+rACmShN5YAxmcXSmU4sUqFUR6LD1EF/ebUXBuOUg==","signatures":[{"sig":"MEYCIQDwXy82Mpjuoau+CIXaKjY9m2+4peZSBuBMhSI1/rctagIhAK4ZxutM/WDG7dGJFMdAT+NZFc020Su0eDzrLTTJiA1z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230704115754-19bc6fae-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":575752},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230704115754-19bc6fae-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/ee07771dabb0a9657541d3d8b3229465/blocksuite-virgo-0.0.0-20230704115754-19bc6fae-nightly.tgz","_integrity":"sha512-78RH7LQMA+OyqkmD8yi+PN0p1hDFWhEHoV844Dx228y9K+rACmShN5YAxmcXSmU4sUqFUR6LD1EF/ebUXBuOUg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230704115754-19bc6fae-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.5"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230704115754-19bc6fae-nightly_1688489792620_0.4333868138966661","host":"s3://npm-registry-packages"}},"0.0.0-20230705042827-ff88aee4-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230705042827-ff88aee4-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230705042827-ff88aee4-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"f8fdfc0fa592813b2cbaf0679359ce73ed9e0777","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230705042827-ff88aee4-nightly.tgz","fileCount":162,"integrity":"sha512-1gbeq3xEgk7kWc4VhR8XAx0pCVsEsw9hl1x4o08iU8LH7WZ1zLNYChkLHbwhURFMqiKKThyxPjSHyLG7Kh0EJA==","signatures":[{"sig":"MEUCIF5I2eEwvhQG4G8r++agTReWAGUU5yxTraBFVEhfGxquAiEA0XONMZDnao9ypo+nqAKIw+8nlMQYAg/AbKfaaK/7l50=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230705042827-ff88aee4-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":576689},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230705042827-ff88aee4-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/d315138ffc6f485872f60f3d7b4412f7/blocksuite-virgo-0.0.0-20230705042827-ff88aee4-nightly.tgz","_integrity":"sha512-1gbeq3xEgk7kWc4VhR8XAx0pCVsEsw9hl1x4o08iU8LH7WZ1zLNYChkLHbwhURFMqiKKThyxPjSHyLG7Kh0EJA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230705042827-ff88aee4-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.5"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230705042827-ff88aee4-nightly_1688536047810_0.5091158893022856","host":"s3://npm-registry-packages"}},"0.0.0-20230705060316-3f52aee9-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230705060316-3f52aee9-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230705060316-3f52aee9-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"00edb66f998958de45978971dd030962aacab6b0","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230705060316-3f52aee9-nightly.tgz","fileCount":162,"integrity":"sha512-2+Zwl/H2p/l8Pb3wnDJ6F/h8d8GwQ7Pu2RFWBjmlMLUUxkCb+ENwvRbWTMw/UijRyEQWoZBOy87jm0TSNgVlag==","signatures":[{"sig":"MEYCIQCJYVpo7ywvT7JWrhjyPmjB+ZVXPLFvwDpOWVb6/qPyWwIhAJ/Rll2cVnXfzKRXCB4aK2wPiW0xHZJJdL5jcJJ8diEU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230705060316-3f52aee9-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":576689},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230705060316-3f52aee9-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/f849b14fb8c8c2801d227efbbc5fdafb/blocksuite-virgo-0.0.0-20230705060316-3f52aee9-nightly.tgz","_integrity":"sha512-2+Zwl/H2p/l8Pb3wnDJ6F/h8d8GwQ7Pu2RFWBjmlMLUUxkCb+ENwvRbWTMw/UijRyEQWoZBOy87jm0TSNgVlag==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230705060316-3f52aee9-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.5"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230705060316-3f52aee9-nightly_1688537500691_0.3795908132995154","host":"s3://npm-registry-packages"}},"0.0.0-20230705162600-2cb608e4-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230705162600-2cb608e4-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230705162600-2cb608e4-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"2dee955c89ea18e39d9b7afc74386b8efc24d505","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230705162600-2cb608e4-nightly.tgz","fileCount":162,"integrity":"sha512-QJvHxwgPFKLa9+R6OJe8Il0e7nk1B0PfvgeqH9152FLYat5XA1j3dY3KQrwycHcKoq8xOd00bKw1mKtdpYWRyQ==","signatures":[{"sig":"MEYCIQDSkuNcUBWY7b7GlRsKcGLxOAPEfx3Vc9n2iqoyUN9dGgIhAK+0EWJwPmq6fLIY58RqMxVpNtuU0m9DWRiUksTlDdAj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230705162600-2cb608e4-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":576693},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230705162600-2cb608e4-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/a3ff7b7f5028960145530db57e26e302/blocksuite-virgo-0.0.0-20230705162600-2cb608e4-nightly.tgz","_integrity":"sha512-QJvHxwgPFKLa9+R6OJe8Il0e7nk1B0PfvgeqH9152FLYat5XA1j3dY3KQrwycHcKoq8xOd00bKw1mKtdpYWRyQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230705162600-2cb608e4-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.5"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230705162600-2cb608e4-nightly_1688603487820_0.8821605822427261","host":"s3://npm-registry-packages"}},"0.0.0-20230706100805-4dd03db9-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230706100805-4dd03db9-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230706100805-4dd03db9-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"1199e0b7708fd21fc3062422cd81d367abdd626f","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230706100805-4dd03db9-nightly.tgz","fileCount":162,"integrity":"sha512-TNEV8lOdRh0YXPSEHAN8RciJDcYUmjnsyiMURrwrt63Uhrwku9WZuWdDQ2cNGQQlaE8YxKhJ2ABDq88a6sq9xA==","signatures":[{"sig":"MEYCIQDaMGZ9yZJmV08BxpocVVJke8pecuJ+bWKkSX94bxy1VAIhAMmqyBk+PoP8Z9Hb1yx8rATQeCAx5MqZwNiG9mvHrn90","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230706100805-4dd03db9-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":576727},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230706100805-4dd03db9-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/daf8e9ba5cf28de7324b236c9effb72f/blocksuite-virgo-0.0.0-20230706100805-4dd03db9-nightly.tgz","_integrity":"sha512-TNEV8lOdRh0YXPSEHAN8RciJDcYUmjnsyiMURrwrt63Uhrwku9WZuWdDQ2cNGQQlaE8YxKhJ2ABDq88a6sq9xA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230706100805-4dd03db9-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.5"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230706100805-4dd03db9-nightly_1688639022721_0.4407121557660678","host":"s3://npm-registry-packages"}},"0.0.0-20230706133626-e59dda07-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230706133626-e59dda07-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230706133626-e59dda07-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"233fe7d54db1a649f3513a716ee386f4f1a5c802","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230706133626-e59dda07-nightly.tgz","fileCount":162,"integrity":"sha512-YJRIGQR9/o/+IEy6rktqLyIAcYvvwRi/K8e5RbleYRRuUT/DfI6V9F735QYbel2C+YbkD683fYg1hWZb/BvsSQ==","signatures":[{"sig":"MEYCIQDat4Xr8ET/Ds+alkHiNMua9qGMqHUFMLe0xMaDBQIingIhANEnYllPSWdT8GJ9Htf6PZSmiv1MTcr3DTTBTEToRET7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230706133626-e59dda07-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":577134},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230706133626-e59dda07-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/df8e27d8efd79883287568236c5c631f/blocksuite-virgo-0.0.0-20230706133626-e59dda07-nightly.tgz","_integrity":"sha512-YJRIGQR9/o/+IEy6rktqLyIAcYvvwRi/K8e5RbleYRRuUT/DfI6V9F735QYbel2C+YbkD683fYg1hWZb/BvsSQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230706133626-e59dda07-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.5"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230706133626-e59dda07-nightly_1688689842970_0.9279319847642269","host":"s3://npm-registry-packages"}},"0.0.0-20230707101710-90a6e5e4-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230707101710-90a6e5e4-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230707101710-90a6e5e4-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"d0a83888bd5df6014a5bccf63ea795f136e52c4a","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230707101710-90a6e5e4-nightly.tgz","fileCount":162,"integrity":"sha512-fY8WE1mALPoRq69pKctEM8nvnwOUta4d67mi3R5NhFntAJIJJ1l5BTAwerMGV+IaXDeCFAzIk9ov8oENyaqaqg==","signatures":[{"sig":"MEYCIQCrnGHDqsBwG/kNNwIBWpaI1EhK0RJyk//hsjpOLGB7PgIhAM4IP6u4s65K9/Pab1WoLzSqsqA9oSDpPFRonk1oGyXO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230707101710-90a6e5e4-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":576950},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230707101710-90a6e5e4-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/897f621c245b520074c68061ee77967e/blocksuite-virgo-0.0.0-20230707101710-90a6e5e4-nightly.tgz","_integrity":"sha512-fY8WE1mALPoRq69pKctEM8nvnwOUta4d67mi3R5NhFntAJIJJ1l5BTAwerMGV+IaXDeCFAzIk9ov8oENyaqaqg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230707101710-90a6e5e4-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.5"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230707101710-90a6e5e4-nightly_1688776203451_0.9245026070035767","host":"s3://npm-registry-packages"}},"0.0.0-20230708145134-cac23f63-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230708145134-cac23f63-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230708145134-cac23f63-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"818ffa065e39472230529823e683c543e05e33f3","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230708145134-cac23f63-nightly.tgz","fileCount":162,"integrity":"sha512-KEg1RN3v/FNNuqK5s574HHdWA1ZdxK06Kx5ZdYHR+7FwQS6jA/u7TsGyDBagDOLMFRIRnS2LZjund0b+eeLKEQ==","signatures":[{"sig":"MEUCIQDR/S6WCRL71ZEL5cDw97zZ/PKCEz7Lz8AGnonsNRaNKAIgcHsSHNw0mCRVLibD/a696fMzKZpIzp0AqmSFVjhSRII=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230708145134-cac23f63-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":576950},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230708145134-cac23f63-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/f68cc20a5ddccf0fa096cd1be267281e/blocksuite-virgo-0.0.0-20230708145134-cac23f63-nightly.tgz","_integrity":"sha512-KEg1RN3v/FNNuqK5s574HHdWA1ZdxK06Kx5ZdYHR+7FwQS6jA/u7TsGyDBagDOLMFRIRnS2LZjund0b+eeLKEQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230708145134-cac23f63-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.5"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230708145134-cac23f63-nightly_1688862876774_0.29330596887085436","host":"s3://npm-registry-packages"}},"0.0.0-20230710082350-3a26a731-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230710082350-3a26a731-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230710082350-3a26a731-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"cc69732cdc5ec4d9b00a2dc1ca833ec1f4099654","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230710082350-3a26a731-nightly.tgz","fileCount":162,"integrity":"sha512-lzDycKciSB8La2y5YNusV16UR58Xry0gdRVpTwL3t1Rw1Qe7O3MsBvcLR9QHtQ7/2T6kA/mVRv4ULQTi9aFEvQ==","signatures":[{"sig":"MEYCIQDjxV10R0umzl6uYr14YpdeFd6feAVP5llWRSIvLoGXvQIhAJV3vYB4jKsIEy94nOWyl4hR/vYw68MQm8tijafS7Yhz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230710082350-3a26a731-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":577647},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230710082350-3a26a731-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/0db368a5f8c40383d42efaf34ccf495b/blocksuite-virgo-0.0.0-20230710082350-3a26a731-nightly.tgz","_integrity":"sha512-lzDycKciSB8La2y5YNusV16UR58Xry0gdRVpTwL3t1Rw1Qe7O3MsBvcLR9QHtQ7/2T6kA/mVRv4ULQTi9aFEvQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230710082350-3a26a731-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.5"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230710082350-3a26a731-nightly_1688988007213_0.9139289427768174","host":"s3://npm-registry-packages"}},"0.0.0-20230710180251-cc217754-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230710180251-cc217754-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230710180251-cc217754-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"60f9573bef47e19248a0c94169b886c3dda688f7","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230710180251-cc217754-nightly.tgz","fileCount":162,"integrity":"sha512-dr+7CT/CZgGN4wAS1VU1ZptC26zfT1LgVZKbftQ99yv5IhxIuQK0ORRlNq1yJLe/mUg6LiKiEMA28VgumnUtTw==","signatures":[{"sig":"MEUCIQCuJKJw+Xt9qBdaCzcwo043UJZZJgBmcmpoqqz+mr74dAIgKdRg+P5u53PRnsu42Tb1/UOR9QQOQR/ymQ4vNV0Yrck=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230710180251-cc217754-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":577406},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230710180251-cc217754-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/0de30e81b9c9e172d476c167e129d2b0/blocksuite-virgo-0.0.0-20230710180251-cc217754-nightly.tgz","_integrity":"sha512-dr+7CT/CZgGN4wAS1VU1ZptC26zfT1LgVZKbftQ99yv5IhxIuQK0ORRlNq1yJLe/mUg6LiKiEMA28VgumnUtTw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230710180251-cc217754-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.6"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230710180251-cc217754-nightly_1689035319443_0.649942814299711","host":"s3://npm-registry-packages"}},"0.0.0-20230711013419-0b07ee2d-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230711013419-0b07ee2d-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230711013419-0b07ee2d-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"4b8d215c9b5741161f14902c35b5cb4efd8ad1ee","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230711013419-0b07ee2d-nightly.tgz","fileCount":162,"integrity":"sha512-9rvbh+e5cz4kmgv7pmfCDU7ApimQlDWzRGhJa+3HczrlqcdyZecnb+Ap3i8dH+Enem9KSJITlthva0egL5sa7g==","signatures":[{"sig":"MEYCIQCA2rMkcigaYTzQKKFt4C5ZAElu3/UCKgU+dY5kYtBDUgIhANgaRj1M24091JRgqtAwEdZwuOnRxVpwL/VyBPRcrNUr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230711013419-0b07ee2d-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":577616},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230711013419-0b07ee2d-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/e0a24ebe0e67a9e75db2605b71f22177/blocksuite-virgo-0.0.0-20230711013419-0b07ee2d-nightly.tgz","_integrity":"sha512-9rvbh+e5cz4kmgv7pmfCDU7ApimQlDWzRGhJa+3HczrlqcdyZecnb+Ap3i8dH+Enem9KSJITlthva0egL5sa7g==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230711013419-0b07ee2d-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.6"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230711013419-0b07ee2d-nightly_1689045356166_0.5909876150225961","host":"s3://npm-registry-packages"}},"0.0.0-20230711103520-ce18dd84-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230711103520-ce18dd84-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230711103520-ce18dd84-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"b646a0f238082559a10f92bcd7d0133aa14cf7a0","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230711103520-ce18dd84-nightly.tgz","fileCount":162,"integrity":"sha512-QoaC51yTBoKtmUSKS1XTSZXT5iWExA39zcV/yP/Ay/MX1pFzsw7dOSbTWaJ3UT67SYVv7BSy86wKEhtdB9EMtQ==","signatures":[{"sig":"MEUCIQD/cx7DOhEcmaHei+s3g/qVRb/jRFOuyDpugih8mOfvCAIgAiHmB3CQSO6UuiCSPUwRtNkHe+xQ6h33oFwO5nWYDmk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230711103520-ce18dd84-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":577628},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230711103520-ce18dd84-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/2ca87ca488d70cd1f30d3c97235e351d/blocksuite-virgo-0.0.0-20230711103520-ce18dd84-nightly.tgz","_integrity":"sha512-QoaC51yTBoKtmUSKS1XTSZXT5iWExA39zcV/yP/Ay/MX1pFzsw7dOSbTWaJ3UT67SYVv7BSy86wKEhtdB9EMtQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230711103520-ce18dd84-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.6"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230711103520-ce18dd84-nightly_1689121972097_0.3649912233024788","host":"s3://npm-registry-packages"}},"0.0.0-20230712103008-d60b6475-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230712103008-d60b6475-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230712103008-d60b6475-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"086f2fdd6c69cd8c02c9e3c486ee67cef166697a","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230712103008-d60b6475-nightly.tgz","fileCount":162,"integrity":"sha512-bhn4jkkhXWiyGYo4J/+zuDk8rTPzttegC3IOwX4ViHb60awnzEEuzaTjyLoQCLq4C+wDwFZvmnjEBoaneinhDA==","signatures":[{"sig":"MEUCIGBOrImv7f41RXvQ4wuDHPwYl6L0ADlSSBiSe3VTRyM2AiEAhrfAJFBYRzmWPV2eKRJsBkOYNfgNAtlZAd9Wg1Lf2Fw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230712103008-d60b6475-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":577628},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230712103008-d60b6475-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/8cb305cf75aba7070cb2e6e248b5fe33/blocksuite-virgo-0.0.0-20230712103008-d60b6475-nightly.tgz","_integrity":"sha512-bhn4jkkhXWiyGYo4J/+zuDk8rTPzttegC3IOwX4ViHb60awnzEEuzaTjyLoQCLq4C+wDwFZvmnjEBoaneinhDA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230712103008-d60b6475-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.6"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230712103008-d60b6475-nightly_1689158044176_0.5046327798740542","host":"s3://npm-registry-packages"}},"0.0.0-20230712111942-2ffb8985-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230712111942-2ffb8985-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230712111942-2ffb8985-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"2c1b4a62e4667317eaa244fbbfd0706fe2e2c15b","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230712111942-2ffb8985-nightly.tgz","fileCount":162,"integrity":"sha512-+et8FNeg3JrDHy06opHE7NrDNZ+S51Cl9gvq37InTcJcVhDxT/Yb+LKTf6s1bE5jxOMLDxKEDJCZ0J3e9ewhAQ==","signatures":[{"sig":"MEUCIQCoQZ2hWr9CRlusW9uVqukNMuCMnr44IsmOSZ7uGNPIBwIgbN/Rasljdd1QTPGltjMMDykCVc07xEwJ8a/91k2DOLY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230712111942-2ffb8985-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":577876},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230712111942-2ffb8985-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/1ffbe73a94b1cfcddb91976f484e9f54/blocksuite-virgo-0.0.0-20230712111942-2ffb8985-nightly.tgz","_integrity":"sha512-+et8FNeg3JrDHy06opHE7NrDNZ+S51Cl9gvq37InTcJcVhDxT/Yb+LKTf6s1bE5jxOMLDxKEDJCZ0J3e9ewhAQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230712111942-2ffb8985-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.6"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230712111942-2ffb8985-nightly_1689162098830_0.17426669656238603","host":"s3://npm-registry-packages"}},"0.0.0-20230712133952-834fa060-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230712133952-834fa060-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230712133952-834fa060-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"9f86c58c76ae2d2ab547c92cf0f70fda348372cc","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230712133952-834fa060-nightly.tgz","fileCount":162,"integrity":"sha512-k5d/KLUfdAwEk5cRBpvudJ4VZmd3/VyZH9SLKZMboRVtns/6er7O8Kkp2t87Fmy0U6dk8UgxRIOvYTt3zzR6/Q==","signatures":[{"sig":"MEQCIFuyptDaVMOLuHcFGv/snTU9Qt8k/IDkHXeLcluv9iMyAiA977wjNsUo5N5uHXXKgwlkFp6jLPcSll5NVToK4bclkQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230712133952-834fa060-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":577876},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230712133952-834fa060-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/b924db62acd5851299676e1da62fdf2f/blocksuite-virgo-0.0.0-20230712133952-834fa060-nightly.tgz","_integrity":"sha512-k5d/KLUfdAwEk5cRBpvudJ4VZmd3/VyZH9SLKZMboRVtns/6er7O8Kkp2t87Fmy0U6dk8UgxRIOvYTt3zzR6/Q==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230712133952-834fa060-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.6"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230712133952-834fa060-nightly_1689174604660_0.5945573815398448","host":"s3://npm-registry-packages"}},"0.0.0-20230713062147-9eb7708c-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230713062147-9eb7708c-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230713062147-9eb7708c-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"878eefb827568c9398486d55144f358174c61867","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230713062147-9eb7708c-nightly.tgz","fileCount":162,"integrity":"sha512-Z3qJWEhw0yVzbCg0F8joCke17M4sTE1FI7Roy4L4grl03AEw0UT4IMzjVAtcpTZbGPtRUcuLIlW+B0v2oOOrbA==","signatures":[{"sig":"MEUCIDR6ZO1GS9chXvSAfhSKg/dN9rtnY6qUlwtEgD9ZWEvmAiEAwf1VRWZ9TImcd/pMfbkKInsw5TMGkGCV0KkIwwSGhy8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230713062147-9eb7708c-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":577872},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230713062147-9eb7708c-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/2c2c5444797c0c16a6c28ba0e3aacb31/blocksuite-virgo-0.0.0-20230713062147-9eb7708c-nightly.tgz","_integrity":"sha512-Z3qJWEhw0yVzbCg0F8joCke17M4sTE1FI7Roy4L4grl03AEw0UT4IMzjVAtcpTZbGPtRUcuLIlW+B0v2oOOrbA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230713062147-9eb7708c-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.6"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230713062147-9eb7708c-nightly_1689229650592_0.44911469935980675","host":"s3://npm-registry-packages"}},"0.0.0-20230713131127-200a0dc1-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230713131127-200a0dc1-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230713131127-200a0dc1-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"330ab472949a5ed983b2e1724ab7a20b71733bf6","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230713131127-200a0dc1-nightly.tgz","fileCount":167,"integrity":"sha512-JVDePhbzywjWxdcCefAhH3LU/8r00iKAjM2k5jHH7pIbAlx06GtPO6edbJGU6pMA0a0zPqWdest7sxIbtFKuXQ==","signatures":[{"sig":"MEUCIBj1c5S6/XpiYe1GjuAyqIvA5AHXN6OA7Fx4k65h/wGGAiEAgzHMQ2w66t9n4r83+bCway07NCBnKmk+BCnNikKt/8Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230713131127-200a0dc1-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":615054},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230713131127-200a0dc1-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/c944a9dd3d4e1cd3e8b22ba454fc0b23/blocksuite-virgo-0.0.0-20230713131127-200a0dc1-nightly.tgz","_integrity":"sha512-JVDePhbzywjWxdcCefAhH3LU/8r00iKAjM2k5jHH7pIbAlx06GtPO6edbJGU6pMA0a0zPqWdest7sxIbtFKuXQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230713131127-200a0dc1-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.6"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230713131127-200a0dc1-nightly_1689262421688_0.664064088715139","host":"s3://npm-registry-packages"}},"0.0.0-20230713173440-3405aaae-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230713173440-3405aaae-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230713173440-3405aaae-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"731efb4776a059de1fa83f034185a9e666533eb2","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230713173440-3405aaae-nightly.tgz","fileCount":167,"integrity":"sha512-Bz7ix+CreiyYtPThVBk5k/+ecg+CHkuJDk6Y3WNgPIlzcQw3jEoeNKviXjISxlrnRA3F/F4d3P9/Cx1MgiAxfg==","signatures":[{"sig":"MEUCIQDp+s3JkAZPQLePhTcLYncgM7mdlAaO1pyHoQmvv0N8DQIgf+DMEsfPbN4CAU2ISt8yWuIpX9W7nVpKez6J/u5c5/Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230713173440-3405aaae-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":615054},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230713173440-3405aaae-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/7903344c1643aaf218c7f10a01b99d1b/blocksuite-virgo-0.0.0-20230713173440-3405aaae-nightly.tgz","_integrity":"sha512-Bz7ix+CreiyYtPThVBk5k/+ecg+CHkuJDk6Y3WNgPIlzcQw3jEoeNKviXjISxlrnRA3F/F4d3P9/Cx1MgiAxfg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230713173440-3405aaae-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.6"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230713173440-3405aaae-nightly_1689294672232_0.5755698841266539","host":"s3://npm-registry-packages"}},"0.0.0-20230714140010-e7345948-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230714140010-e7345948-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230714140010-e7345948-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"b1dae9bfc891a11d17eb1227d4da027021bfcead","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230714140010-e7345948-nightly.tgz","fileCount":167,"integrity":"sha512-vPDM6mrU8oBrft+jOdfSCCWiNmSInxZCNy2nEYOmXI1Wg2sMFtUg9sBcSc33i9rlEgOqjSpGYQHLP+Xhs8x7kw==","signatures":[{"sig":"MEUCIQDx8kWMYwHgoRcUMn04a7wnCvEpdwWrPIxiIwwtH1vnuAIgaRnYgKwmJ3+1jsjakPAGNpp4Ta6xTNvOY6z4A7VnkqM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230714140010-e7345948-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":615054},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230714140010-e7345948-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/03d3a3ebd3479ee358eed5506e677d07/blocksuite-virgo-0.0.0-20230714140010-e7345948-nightly.tgz","_integrity":"sha512-vPDM6mrU8oBrft+jOdfSCCWiNmSInxZCNy2nEYOmXI1Wg2sMFtUg9sBcSc33i9rlEgOqjSpGYQHLP+Xhs8x7kw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230714140010-e7345948-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.6"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230714140010-e7345948-nightly_1689381104462_0.7101895392904007","host":"s3://npm-registry-packages"}},"0.0.0-20230715003621-9e2981bf-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230715003621-9e2981bf-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230715003621-9e2981bf-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"1fc4cac77438d94a7610a977581070237784f82a","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230715003621-9e2981bf-nightly.tgz","fileCount":167,"integrity":"sha512-XYOqo3zywy7CN2ILPh8AhrVe85cVHWFlaJ4ycnzmRwh8InRgsXIqkufzBsPIqrn/mGpeyQBEc6OKVK4BXRZHUw==","signatures":[{"sig":"MEYCIQCNkyrbi8m6ErgAQ+41XYJNLJqOclNypDzt+7dayNJRBgIhAMqb2ZmhfU+mDTjPYX11naPyMqV6qcpAIQSfJAAn3mlU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230715003621-9e2981bf-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":617501},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230715003621-9e2981bf-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/5a9735abc8deb5d4759474dc3bc2ec46/blocksuite-virgo-0.0.0-20230715003621-9e2981bf-nightly.tgz","_integrity":"sha512-XYOqo3zywy7CN2ILPh8AhrVe85cVHWFlaJ4ycnzmRwh8InRgsXIqkufzBsPIqrn/mGpeyQBEc6OKVK4BXRZHUw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230715003621-9e2981bf-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.6"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230715003621-9e2981bf-nightly_1689467621600_0.4463096783125149","host":"s3://npm-registry-packages"}},"0.0.0-20230716144121-5b169b38-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230716144121-5b169b38-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230716144121-5b169b38-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"d4bb6dd8fa5bae0f37b0eeaa2bd076ae8d3a6428","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230716144121-5b169b38-nightly.tgz","fileCount":167,"integrity":"sha512-OmozB72RCleMwG2XN++g/efQB9bdpbrvuzQwgrXX12Ngy1OpKSqZt5P1tlu81RxRhTaqm6B0muhUqhyu26FtqQ==","signatures":[{"sig":"MEUCIDlR67uvjP+SGyDOcfxm0hr6M3xNYu6bkVGWHRkD7yK9AiEA8y6E8b6J9LFk60AWQLGbDzg6ZS5QTmSugxpwzCson/g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230716144121-5b169b38-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":614512},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230716144121-5b169b38-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/2e8e188b414aac59802c22439dc6005e/blocksuite-virgo-0.0.0-20230716144121-5b169b38-nightly.tgz","_integrity":"sha512-OmozB72RCleMwG2XN++g/efQB9bdpbrvuzQwgrXX12Ngy1OpKSqZt5P1tlu81RxRhTaqm6B0muhUqhyu26FtqQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230716144121-5b169b38-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.6"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230716144121-5b169b38-nightly_1689518719245_0.10571797382789727","host":"s3://npm-registry-packages"}},"0.0.0-20230717055529-79180930-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230717055529-79180930-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230717055529-79180930-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"2b8e2f02418ddddf2cb7c8f516494d896b4a36b1","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230717055529-79180930-nightly.tgz","fileCount":167,"integrity":"sha512-xh86dBxAlFVQ+k/S3VhtR+PTd/dR1ZmUwG8HHW5dnnPeoj02+mfNLLD7+UAqUR0bI6Itcn5P/P1S8J1gBGqb8g==","signatures":[{"sig":"MEQCIEv9ZwIib9lcUbMS+9V8v9h2vbpH6ugKvMfvJzAeJTvcAiAOVD8fyLHAI3eRebFxZ1LxeStwGicbrDJ/M15CGRvrqw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230717055529-79180930-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":614512},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230717055529-79180930-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/6c4dd6060319de5bc543fd10992b98be/blocksuite-virgo-0.0.0-20230717055529-79180930-nightly.tgz","_integrity":"sha512-xh86dBxAlFVQ+k/S3VhtR+PTd/dR1ZmUwG8HHW5dnnPeoj02+mfNLLD7+UAqUR0bI6Itcn5P/P1S8J1gBGqb8g==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230717055529-79180930-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.6"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230717055529-79180930-nightly_1689573580617_0.641488590964391","host":"s3://npm-registry-packages"}},"0.7.0":{"name":"@blocksuite/virgo","version":"0.7.0","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.7.0","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"3e652abbc50fe21d9668f46403d15e492b4252a4","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.7.0.tgz","fileCount":167,"integrity":"sha512-DsJVZRrf+ly4F3C1aHP+9ALd0HPfKuu+5h3DRJfEfR18TKxe0msZjdJkprkBj/v9v578gxuyR322NJizZF5GoA==","signatures":[{"sig":"MEQCIHhQsy2sUX6ubEgdGsNawSo1t6vksdPQNFZ/WUXPE89+AiAXujyPooK7hq5wtZwDbBCBpDHUskBJ2d8S7jK1JqTgow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.7.0","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":614664},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.7.0.tgz","types":"dist/index.d.ts","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/23f6fbb32b7082273dd42fd4237f6267/blocksuite-virgo-0.7.0.tgz","_integrity":"sha512-DsJVZRrf+ly4F3C1aHP+9ALd0HPfKuu+5h3DRJfEfR18TKxe0msZjdJkprkBj/v9v578gxuyR322NJizZF5GoA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"lit":"^2.7.3","yjs":"^13.6.6"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.7.0_1689609792962_0.24762433065627198","host":"s3://npm-registry-packages"}},"0.0.0-20230717160948-0ea73274-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230717160948-0ea73274-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230717160948-0ea73274-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"b9185e1c442cd20f2cb5026fa8ba09f2c3bc7f1b","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230717160948-0ea73274-nightly.tgz","fileCount":167,"integrity":"sha512-zhQ83r7Crw++OvErR8OGpJ21Uklloes/BkbKySZF40/xKxjpjHA2//s9pz5Pt3z1LBg7Kne5CaV+XTNAwfPabg==","signatures":[{"sig":"MEQCID53N37/kokyyTC/JcL80m1yp2ctjPpdiUgkn8drQCDxAiAb5Sy/e92Lb9HOG9BZ/21Ee9ChXJ02Ah8r0gFyrvcxvA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230717160948-0ea73274-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":614732},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230717160948-0ea73274-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/e6d34c6ab3e4d025b67ff9dbb076ef38/blocksuite-virgo-0.0.0-20230717160948-0ea73274-nightly.tgz","_integrity":"sha512-zhQ83r7Crw++OvErR8OGpJ21Uklloes/BkbKySZF40/xKxjpjHA2//s9pz5Pt3z1LBg7Kne5CaV+XTNAwfPabg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230717160948-0ea73274-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.6"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230717160948-0ea73274-nightly_1689641391958_0.9624826870817917","host":"s3://npm-registry-packages"}},"0.0.0-20230718155514-65ea63b4-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230718155514-65ea63b4-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230718155514-65ea63b4-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"b66f4110fba228cc2db4d60cf56a4b1ff28b7115","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230718155514-65ea63b4-nightly.tgz","fileCount":167,"integrity":"sha512-StRssFkqrV9oIWkK+Sj9P6Jcir+J2ZTLUnVOvlMbtr6smXRYb3Gzkc1CMmW7k8f2aInaXfFre5QDFJZPbbtq0w==","signatures":[{"sig":"MEUCID3NSsd3nLRZZAibwFy28qO0e/mLk+qgrIw3EYB01jxAAiEAjUMGNmLYhHtjNvY0y8+euFGm+PZWmkpgo40hf/KKSwU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230718155514-65ea63b4-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":615135},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230718155514-65ea63b4-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/c6b2e2c567d2d38bdf833c2d3fd25255/blocksuite-virgo-0.0.0-20230718155514-65ea63b4-nightly.tgz","_integrity":"sha512-StRssFkqrV9oIWkK+Sj9P6Jcir+J2ZTLUnVOvlMbtr6smXRYb3Gzkc1CMmW7k8f2aInaXfFre5QDFJZPbbtq0w==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230718155514-65ea63b4-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.6"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230718155514-65ea63b4-nightly_1689727468043_0.2715770363722243","host":"s3://npm-registry-packages"}},"0.0.0-20230719163314-76d863fc-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230719163314-76d863fc-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230719163314-76d863fc-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"fb1768fdf6117f71ddea462daeecfd45988d9e97","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230719163314-76d863fc-nightly.tgz","fileCount":167,"integrity":"sha512-9YgNUjngYUkrAq006gg25ox7dPvRPE0B+jjhn9x4GZr5bYYfA3AQKw/ROqFBicBuwsgfWF8BKlJDpghOpH2sXg==","signatures":[{"sig":"MEQCIHF0A9O7Plq45kjFEA1irWst3FXAF/dh5bGFcYlPV5uDAiA8F6gJtYKvtdpi2d64v8ef1C+pKJjX5nJfsNR2wBgOMQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230719163314-76d863fc-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":614944},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230719163314-76d863fc-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/ba21a89b55b87e53003151a5b20b84c9/blocksuite-virgo-0.0.0-20230719163314-76d863fc-nightly.tgz","_integrity":"sha512-9YgNUjngYUkrAq006gg25ox7dPvRPE0B+jjhn9x4GZr5bYYfA3AQKw/ROqFBicBuwsgfWF8BKlJDpghOpH2sXg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230719163314-76d863fc-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.6"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230719163314-76d863fc-nightly_1689812964851_0.04451941227833456","host":"s3://npm-registry-packages"}},"0.0.0-20230720161412-7c6791e1-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230720161412-7c6791e1-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230720161412-7c6791e1-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"aba902c09107bc40d684554193a8056d09fac947","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230720161412-7c6791e1-nightly.tgz","fileCount":167,"integrity":"sha512-ZHSBw66BB0boZq8KdHatmbq5KCXItBafe9H7niE4+h1UJ4Ax2Uk9hZT8dfJYlKCHaHG7d/jQWTz+rbRf4oG5mQ==","signatures":[{"sig":"MEYCIQChatJ+s22f48FDT/U/jQUv0W8Rgzccuon0dhMtA3lXTwIhAMElDR43XRHvGxth+NsmOfHMNVgivY22D4WWukZiMo2B","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230720161412-7c6791e1-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":620582},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230720161412-7c6791e1-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/3c8a0747f42e4c86228c96f516aad208/blocksuite-virgo-0.0.0-20230720161412-7c6791e1-nightly.tgz","_integrity":"sha512-ZHSBw66BB0boZq8KdHatmbq5KCXItBafe9H7niE4+h1UJ4Ax2Uk9hZT8dfJYlKCHaHG7d/jQWTz+rbRf4oG5mQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230720161412-7c6791e1-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.6"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230720161412-7c6791e1-nightly_1689899236702_0.3145120523406948","host":"s3://npm-registry-packages"}},"0.0.0-20230721134812-6e0e3bef-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230721134812-6e0e3bef-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230721134812-6e0e3bef-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"594e38ffc71e85e9f11869e11e64fc9eac256f4b","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230721134812-6e0e3bef-nightly.tgz","fileCount":167,"integrity":"sha512-lAnSuTRpzh9zrQI0OJ3r/HszGg2pJmAj0LThN6VFnakIIm+UlBxm7trXdsXyqMya1cT3TiiCyFAL1NoE3FWOvw==","signatures":[{"sig":"MEYCIQCwcu9ezv2I7Kt8FeZ/s2G0lFn7u5NG8lJJsP9IFWEfowIhAPAKx8hMXGxD8dCRzvYtLa7ERqV+spwgCKye/FR7VPBS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230721134812-6e0e3bef-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":624119},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230721134812-6e0e3bef-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/559ae30cbb3204a94a4897cd1c1bc572/blocksuite-virgo-0.0.0-20230721134812-6e0e3bef-nightly.tgz","_integrity":"sha512-lAnSuTRpzh9zrQI0OJ3r/HszGg2pJmAj0LThN6VFnakIIm+UlBxm7trXdsXyqMya1cT3TiiCyFAL1NoE3FWOvw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230721134812-6e0e3bef-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.6"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230721134812-6e0e3bef-nightly_1689985716066_0.9305166131699485","host":"s3://npm-registry-packages"}},"0.0.0-20230722125003-4c0d3989-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230722125003-4c0d3989-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230722125003-4c0d3989-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"8c275b614393512186880b9668e7001e5f131f92","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230722125003-4c0d3989-nightly.tgz","fileCount":167,"integrity":"sha512-cleTjLKlrkmIMqFV7CUrHvomD7ASuc8t+a9+XVEBbtP7fwhnwtTsmzZ1mDggBgggatuRMDmZqUNgGstXld3qfg==","signatures":[{"sig":"MEUCIQCeO6oDq7GVoMqJw8E7bsZ1uFuOvRnhmF3QfbiCGwLYYAIgW24fvQjavGzzlxYjZAC3LH3s91pbeVBIGP+ARVSKHEc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230722125003-4c0d3989-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":624493},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230722125003-4c0d3989-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/cf6cf83a53e678f77378747591da68b9/blocksuite-virgo-0.0.0-20230722125003-4c0d3989-nightly.tgz","_integrity":"sha512-cleTjLKlrkmIMqFV7CUrHvomD7ASuc8t+a9+XVEBbtP7fwhnwtTsmzZ1mDggBgggatuRMDmZqUNgGstXld3qfg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230722125003-4c0d3989-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.6"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230722125003-4c0d3989-nightly_1690072211885_0.41224817119896184","host":"s3://npm-registry-packages"}},"0.0.0-20230723041323-29ce5d2f-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230723041323-29ce5d2f-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230723041323-29ce5d2f-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"991c6c0e9ddfeaa1656572c00eebf6fd1bdd3904","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230723041323-29ce5d2f-nightly.tgz","fileCount":167,"integrity":"sha512-Jm2iamX4dMNMROMNrY2nBMQPBC910WK/HDx9nPJvlUlp1Om/Euw6CFmqc+RhJjzIN3ZAl4HRmn0yLkVcuri1ug==","signatures":[{"sig":"MEYCIQCpDhLDJBCXHum4UX9xErNbSBdYQSVjzENAdLE8lL8vIAIhANz+ojCbUeucau32X/RYypgP05es5YAIHAmTF2fYzY4l","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230723041323-29ce5d2f-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":624485},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230723041323-29ce5d2f-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/e3a5523cbcd569045e51f24c44fbc4b5/blocksuite-virgo-0.0.0-20230723041323-29ce5d2f-nightly.tgz","_integrity":"sha512-Jm2iamX4dMNMROMNrY2nBMQPBC910WK/HDx9nPJvlUlp1Om/Euw6CFmqc+RhJjzIN3ZAl4HRmn0yLkVcuri1ug==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230723041323-29ce5d2f-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.6"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230723041323-29ce5d2f-nightly_1690158528356_0.7360498331636891","host":"s3://npm-registry-packages"}},"0.0.0-20230724154746-52953d6c-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230724154746-52953d6c-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230724154746-52953d6c-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"a0daf222b43abec77394ac17ad7dc1de7ab5d4c8","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230724154746-52953d6c-nightly.tgz","fileCount":167,"integrity":"sha512-s17s9T7AVpIS0k53rb0RtZh7JFzMd8hPLXr+VfuY59gN4lBwcX2sqAFNoBDUDi1Tts9PHxUzT4OHtT6k74IAPQ==","signatures":[{"sig":"MEUCIFqc2cyWqi1ZN0KNwEbjUYmtw26hW+9jYW+AujHct3eGAiEAhT/IMcloL1Vhq5jaOAt/Nua2OJB1zCqACHIyQ6euTrQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230724154746-52953d6c-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":624873},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230724154746-52953d6c-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/88dff598b84130334be85e3c4221cdd7/blocksuite-virgo-0.0.0-20230724154746-52953d6c-nightly.tgz","_integrity":"sha512-s17s9T7AVpIS0k53rb0RtZh7JFzMd8hPLXr+VfuY59gN4lBwcX2sqAFNoBDUDi1Tts9PHxUzT4OHtT6k74IAPQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230724154746-52953d6c-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.6"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230724154746-52953d6c-nightly_1690244898343_0.021960346933280972","host":"s3://npm-registry-packages"}},"0.0.0-20230725170625-d6366e35-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230725170625-d6366e35-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230725170625-d6366e35-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"9c27f7f890843a60c704ef2bd36566c6887677ab","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230725170625-d6366e35-nightly.tgz","fileCount":167,"integrity":"sha512-96dzFmhqtDVdXmjFP0WPnr3xkx7YUMf9bEg/Ur7XMpHxRcOIDziUIfeXt4sXv6QqVGEsN8WbofJgWywEoBgt1Q==","signatures":[{"sig":"MEYCIQDa47Jf9jhLZbNhwDy8pckUOxJtG+bE0gJAnBHcGo+XgQIhALovoeDUuO6Jsw/IW8nUQyQ7ny8C+Wkld70xRWQ39r53","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230725170625-d6366e35-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":625403},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230725170625-d6366e35-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/b1192fb5aa83a055eb92fba73278cfbe/blocksuite-virgo-0.0.0-20230725170625-d6366e35-nightly.tgz","_integrity":"sha512-96dzFmhqtDVdXmjFP0WPnr3xkx7YUMf9bEg/Ur7XMpHxRcOIDziUIfeXt4sXv6QqVGEsN8WbofJgWywEoBgt1Q==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.5.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.16.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230725170625-d6366e35-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.6"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230725170625-d6366e35-nightly_1690331271431_0.7627561629965565","host":"s3://npm-registry-packages"}},"0.0.0-20230721082237-0193726a-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230721082237-0193726a-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230721082237-0193726a-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"5b14c82200f2ebcef7994f652a8edacb37f496e1","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230721082237-0193726a-nightly.tgz","fileCount":167,"integrity":"sha512-F8aoGtiIfwZB2Q+GTwTjck/Oy8XlHqaLZjXGBckjLJlNFkFzdMV+kxpXgy7gWQDuOSZq1n1IOGFctpCDZQHA2w==","signatures":[{"sig":"MEYCIQCjj1t6ok40uTFTEB6UpofzNK1T9+urJbgdIyV8i26JOwIhAP5r3lpvgJitxaptXbfWkwqFDtER1cCezlwRA5RsQgFK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230721082237-0193726a-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":624298},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230721082237-0193726a-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/5b9a7080babb2e29e5d7f2e684d2f944/blocksuite-virgo-0.0.0-20230721082237-0193726a-nightly.tgz","_integrity":"sha512-F8aoGtiIfwZB2Q+GTwTjck/Oy8XlHqaLZjXGBckjLJlNFkFzdMV+kxpXgy7gWQDuOSZq1n1IOGFctpCDZQHA2w==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230721082237-0193726a-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.6"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230721082237-0193726a-nightly_1690343442902_0.15221943461174225","host":"s3://npm-registry-packages"}},"0.0.0-20230725102342-95a6b7e1-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230725102342-95a6b7e1-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230725102342-95a6b7e1-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"3a97758ce74468d0720d0dc9efc1a5a5db4d1bfa","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230725102342-95a6b7e1-nightly.tgz","fileCount":167,"integrity":"sha512-sDO7pzWY3oUQ4D+Wtyoaq4GTjx9tdx53IesM12hK6f2ZZc2vvmsb0PhRr0LJoNvk9355qoDsEbgsZ7eACYMF4g==","signatures":[{"sig":"MEQCIFOtGbKGwxvPHvFX/G3KtUmliYPr4YVIb15mOTT0BaJ6AiAPvxv2WkLcazpP6eNT/q9IqRKEWaoGVOYy1v9Ri3Et2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230725102342-95a6b7e1-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":624298},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230725102342-95a6b7e1-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/eb7e64fdeee2ce75b3befe5ef3258542/blocksuite-virgo-0.0.0-20230725102342-95a6b7e1-nightly.tgz","_integrity":"sha512-sDO7pzWY3oUQ4D+Wtyoaq4GTjx9tdx53IesM12hK6f2ZZc2vvmsb0PhRr0LJoNvk9355qoDsEbgsZ7eACYMF4g==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230725102342-95a6b7e1-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.6"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230725102342-95a6b7e1-nightly_1690355968097_0.7921443009981384","host":"s3://npm-registry-packages"}},"0.0.0-20230726225156-e7b23c54-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230726225156-e7b23c54-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230726225156-e7b23c54-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"7bf7a7f61e1dde383dba05783f9a9a0434244f85","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230726225156-e7b23c54-nightly.tgz","fileCount":167,"integrity":"sha512-q9VJrw4QhxxIY9jMx0yKkQ4XV87MhJouC1KS2EN2nwNDS6AECJ2r1Z54wjGd4N0jw/kOtDNNK1vYVKx1h2bMsA==","signatures":[{"sig":"MEUCIQCmyLFvDuSL9wKPtmTTqQR8VtyF1x/Z7Yx0IKdlaOHi1QIgeQ28TF1/TSWCR7P74l5xY5OH3mDpWgL+uxPqwlbRa5Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230726225156-e7b23c54-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":633403},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230726225156-e7b23c54-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/ffb192b9cea35f33656d26c9671ac992/blocksuite-virgo-0.0.0-20230726225156-e7b23c54-nightly.tgz","_integrity":"sha512-q9VJrw4QhxxIY9jMx0yKkQ4XV87MhJouC1KS2EN2nwNDS6AECJ2r1Z54wjGd4N0jw/kOtDNNK1vYVKx1h2bMsA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230726225156-e7b23c54-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.6"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230726225156-e7b23c54-nightly_1690417537893_0.3533095647007414","host":"s3://npm-registry-packages"}},"0.0.0-20230725102342-7fa145e5-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230725102342-7fa145e5-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230725102342-7fa145e5-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"5d82a55de289a2a00b6291704cbb4fe8301639b8","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230725102342-7fa145e5-nightly.tgz","fileCount":167,"integrity":"sha512-PVityrrQAUGRRyezmv7Q9sCB2U+NkOokA0abUV/icG30pzjfBgLC7PnFS9BuayMNC8ZuVphJBH1yz+cJ/3o26A==","signatures":[{"sig":"MEUCIQCrJ6jZXMkC+t1eDVV+cK+gd8JTYB3aQlEQrgCcijZD8AIgSxhYaFKdp4D4gViwzseO2U+mCJQ0oxRQ2jgaW5yWm2w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230725102342-7fa145e5-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":614512},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230725102342-7fa145e5-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/06fae1ea4e86aa125659c29c418f3bda/blocksuite-virgo-0.0.0-20230725102342-7fa145e5-nightly.tgz","_integrity":"sha512-PVityrrQAUGRRyezmv7Q9sCB2U+NkOokA0abUV/icG30pzjfBgLC7PnFS9BuayMNC8ZuVphJBH1yz+cJ/3o26A==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230725102342-7fa145e5-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.6"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230725102342-7fa145e5-nightly_1690433627145_0.20274278724344463","host":"s3://npm-registry-packages"}},"0.0.0-20230720073515-bea92e0f-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230720073515-bea92e0f-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230720073515-bea92e0f-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"57865c654600781a09723ed4dc645b0106422e00","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230720073515-bea92e0f-nightly.tgz","fileCount":167,"integrity":"sha512-XiiN9yd+J74aCio1ZVjXN1S0PWFbLUaEI05FnyhvvSCLLuAfqQ7CrsssF/de2ZTJNnYa76nfVWwOyADHxYRhiA==","signatures":[{"sig":"MEUCIQCR7Fr2cwfUcOtiMUb8E3p0BrI7lqWEYvKjtKO/xX6A8wIgQHGCoQrzngSRKw/o7rqU8zvmk9CuxvTOET9lnHYCRtc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230720073515-bea92e0f-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":614512},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230720073515-bea92e0f-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/d419a0a87e8e59a6af77a05cf44328f5/blocksuite-virgo-0.0.0-20230720073515-bea92e0f-nightly.tgz","_integrity":"sha512-XiiN9yd+J74aCio1ZVjXN1S0PWFbLUaEI05FnyhvvSCLLuAfqQ7CrsssF/de2ZTJNnYa76nfVWwOyADHxYRhiA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230720073515-bea92e0f-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.6"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230720073515-bea92e0f-nightly_1690434703820_0.5642868327969688","host":"s3://npm-registry-packages"}},"0.0.0-20230727170546-19a35248-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230727170546-19a35248-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230727170546-19a35248-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"3a2781a299560f397912e6d95321e92dd3cac9ca","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230727170546-19a35248-nightly.tgz","fileCount":167,"integrity":"sha512-bcFy8Hv7Dfri6wFKT+s0ZM9bMYS1JF3TzAoUkY4K9WsRg1OZU/pYKfGZI5v1ph8mpxhlXHtI1ykk9e2CQtF2/g==","signatures":[{"sig":"MEYCIQDQ9aSP6JX92z5+MFDIXI8L1VXauwxDTVfSEo3tYHXKJAIhAMH0ckElcbwh4dybNNOl/apGP0U/wR3zBx97P+YWWKCC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230727170546-19a35248-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":634084},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230727170546-19a35248-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/eebbc8a8284fb9819a2a51b326bc1bb6/blocksuite-virgo-0.0.0-20230727170546-19a35248-nightly.tgz","_integrity":"sha512-bcFy8Hv7Dfri6wFKT+s0ZM9bMYS1JF3TzAoUkY4K9WsRg1OZU/pYKfGZI5v1ph8mpxhlXHtI1ykk9e2CQtF2/g==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230727170546-19a35248-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.6"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230727170546-19a35248-nightly_1690503966305_0.06243325089733953","host":"s3://npm-registry-packages"}},"0.0.0-20230728070629-420286ba-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230728070629-420286ba-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230728070629-420286ba-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"6709fc493754dadc42138f0d2f569a109b10c306","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230728070629-420286ba-nightly.tgz","fileCount":167,"integrity":"sha512-/0yRj7EzzT6ktyvWzdnPojt1dg45ItXDTgPMxfePCUJo1X5n7os8awaadYn+3ENGbpbqeglC12JZhXQ/aFmihA==","signatures":[{"sig":"MEQCIDTZSGk4cDDeCZnjpaDF1CaI9ZkAoR6M6tNkNaAzrMMBAiA4vd2PEmdcbZmwwvmGf5VM25z2pxLSRQ3vc7PqWvDkPA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230728070629-420286ba-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":663781},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230728070629-420286ba-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/6c6e9bfaee528ea24719091d6e24fc7b/blocksuite-virgo-0.0.0-20230728070629-420286ba-nightly.tgz","_integrity":"sha512-/0yRj7EzzT6ktyvWzdnPojt1dg45ItXDTgPMxfePCUJo1X5n7os8awaadYn+3ENGbpbqeglC12JZhXQ/aFmihA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230728070629-420286ba-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.6"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230728070629-420286ba-nightly_1690528758667_0.43593621385497094","host":"s3://npm-registry-packages"}},"0.0.0-20230728071745-19d2e107-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230728071745-19d2e107-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230728071745-19d2e107-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"5fbdda0498ce30dfdbb8fd8800e703352c2e557c","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230728071745-19d2e107-nightly.tgz","fileCount":167,"integrity":"sha512-U1X9u6IRavlUM7isBPi3BCoZb8YjTV2fHURNS1wulMvHLE61tQ/7sUIigae6gunqgM2FFrDscKJXgaYbMpTyMw==","signatures":[{"sig":"MEYCIQCu14VM55LqmnPzGf/1LkK/13+6aIPobK4DwSjqxZSMXAIhAK8y67cCArWSn9DyvlE8SbOfa2wKWpVyzyZP67CoP8CD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230728071745-19d2e107-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":663985},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230728071745-19d2e107-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/71e1f286ef82fdc0e0579f6d8f23c07d/blocksuite-virgo-0.0.0-20230728071745-19d2e107-nightly.tgz","_integrity":"sha512-U1X9u6IRavlUM7isBPi3BCoZb8YjTV2fHURNS1wulMvHLE61tQ/7sUIigae6gunqgM2FFrDscKJXgaYbMpTyMw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230728071745-19d2e107-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.6"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230728071745-19d2e107-nightly_1690532953721_0.9265730701692363","host":"s3://npm-registry-packages"}},"0.0.0-20230728114738-06c5d8e7-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230728114738-06c5d8e7-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230728114738-06c5d8e7-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"67a4d13b274eb7a8ed2c2e1c8be9ad5e2d1c9542","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230728114738-06c5d8e7-nightly.tgz","fileCount":167,"integrity":"sha512-JdgLqkON7QYgj+w9qts9nnt6UiKItEBHwErocwM1PAZ+J1gxQRNXhnP1qakJx9ridF9qtwGqFfgyhTjRCQHQIQ==","signatures":[{"sig":"MEUCIQDbeB/f2r1sOgYSv+vy4MY6x8FyDK4ENkmm54jXIlozvgIgEXSu6m2LGottlMZcf/KIxTpCV4FNvlAUmSHFaEoc2CQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230728114738-06c5d8e7-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":663989},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230728114738-06c5d8e7-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/7bad00386d216c6c3ded77cd9f7bbf72/blocksuite-virgo-0.0.0-20230728114738-06c5d8e7-nightly.tgz","_integrity":"sha512-JdgLqkON7QYgj+w9qts9nnt6UiKItEBHwErocwM1PAZ+J1gxQRNXhnP1qakJx9ridF9qtwGqFfgyhTjRCQHQIQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230728114738-06c5d8e7-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.6"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230728114738-06c5d8e7-nightly_1690590336589_0.4553926205107437","host":"s3://npm-registry-packages"}},"0.0.0-20230729011742-613f3782-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230729011742-613f3782-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230729011742-613f3782-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"2f49082fc4b8a4727a1ff7dcf179fc029b418743","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230729011742-613f3782-nightly.tgz","fileCount":167,"integrity":"sha512-UhEMvqv+wcquezy9c3ikBH6vLP8TpoabHZhqhWrVtICkUViIhL6AbaBFwBTHRoArnzZQ9k4e/zb3+Imdr4Bn5A==","signatures":[{"sig":"MEUCID1E0mwjDBZ0RWTtU6E5K0Lk9Du1QN3eoA/xGJrNXm0yAiEAg0QBJGvygoWhaULG965if+FcQHqjfVngELvkOBVZvrk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230729011742-613f3782-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":663989},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230729011742-613f3782-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/50d6009b763af2fb2ad63a8ae65861c8/blocksuite-virgo-0.0.0-20230729011742-613f3782-nightly.tgz","_integrity":"sha512-UhEMvqv+wcquezy9c3ikBH6vLP8TpoabHZhqhWrVtICkUViIhL6AbaBFwBTHRoArnzZQ9k4e/zb3+Imdr4Bn5A==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230729011742-613f3782-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.6"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230729011742-613f3782-nightly_1690594099234_0.7364164866645257","host":"s3://npm-registry-packages"}},"0.0.0-20230729103040-e9812509-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230729103040-e9812509-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230729103040-e9812509-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"577f15c1353f6a68b14a67c7c80d3520e4cffc04","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230729103040-e9812509-nightly.tgz","fileCount":167,"integrity":"sha512-n5XyAY0nZh/Z1+T7i0QlLOhw17Xf7yRbPVicz5prMsIG1GVpLpYTuskKHF/P3uID4VKmpWOll83wDIx031s1jQ==","signatures":[{"sig":"MEUCIQDkcum0IkNy3JALLwHR1L619m1ea/kD4nSCnzbAiyYgGgIgIQ4CnpyrSuXP0ZYBcdUOIKVBSHnrpk46ukEq0FRpKwY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230729103040-e9812509-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":663989},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230729103040-e9812509-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/8a8b627ccddcc824b68ddcff01c8bf2f/blocksuite-virgo-0.0.0-20230729103040-e9812509-nightly.tgz","_integrity":"sha512-n5XyAY0nZh/Z1+T7i0QlLOhw17Xf7yRbPVicz5prMsIG1GVpLpYTuskKHF/P3uID4VKmpWOll83wDIx031s1jQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230729103040-e9812509-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.6"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230729103040-e9812509-nightly_1690676960746_0.9909793985747406","host":"s3://npm-registry-packages"}},"0.0.0-20230730071529-580daeb9-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230730071529-580daeb9-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230730071529-580daeb9-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"a5d0d783b6ad52f112990b8cd9d8f7bf48de1caa","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230730071529-580daeb9-nightly.tgz","fileCount":167,"integrity":"sha512-uyk6rz23O63M+N4HWmJ4cICJqldQ4pYxQPsJdroGyG9v9EO2uKCKv/IrWiELPhzt69neCyF+eynoEdm3y6MaMw==","signatures":[{"sig":"MEUCIQCclXqbEu7zGCnUedlmi4R4OVmAK1bJc2pDAJFvlm2xTgIgA0xTNQfLR2DPNgo5qhyOkfjmJMXS1SE/3cUHO23C1Qc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230730071529-580daeb9-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":664007},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230730071529-580daeb9-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/a1739701abf8685e2231caf4446022fb/blocksuite-virgo-0.0.0-20230730071529-580daeb9-nightly.tgz","_integrity":"sha512-uyk6rz23O63M+N4HWmJ4cICJqldQ4pYxQPsJdroGyG9v9EO2uKCKv/IrWiELPhzt69neCyF+eynoEdm3y6MaMw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230730071529-580daeb9-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.6"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230730071529-580daeb9-nightly_1690763246527_0.4933551535581726","host":"s3://npm-registry-packages"}},"0.0.0-20230731024839-382e9155-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230731024839-382e9155-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230731024839-382e9155-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"a235d9f76902fecc5eaf16afa755ea790e1187c0","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230731024839-382e9155-nightly.tgz","fileCount":167,"integrity":"sha512-oscSlu6F+KD3nQfLPhJv5ts+VFd8lxx+pafN0i6vzST3YEAAP0LeigvCIiVcA8eQ4yPSMVd5sfxtTaut8RZrtg==","signatures":[{"sig":"MEYCIQDtq6LVbEZibATqipxilGj5hd+KDHbvEgdy/G1Yuk90jwIhAIoo7oWeKM7IzL9Du7aSkUZP6Pq0bct/A/IMLPlJvt2Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230731024839-382e9155-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":664152},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230731024839-382e9155-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/e019d54b33e8f16678fb3f9a5ca9d49c/blocksuite-virgo-0.0.0-20230731024839-382e9155-nightly.tgz","_integrity":"sha512-oscSlu6F+KD3nQfLPhJv5ts+VFd8lxx+pafN0i6vzST3YEAAP0LeigvCIiVcA8eQ4yPSMVd5sfxtTaut8RZrtg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230731024839-382e9155-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.3","yjs":"^13.6.6"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230731024839-382e9155-nightly_1690786993306_0.7869478669196321","host":"s3://npm-registry-packages"}},"0.0.0-20230731152415-fdd3d9b0-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230731152415-fdd3d9b0-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230731152415-fdd3d9b0-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"c68f474334cd35a493fd7786ba9c3b4a92d3ba27","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230731152415-fdd3d9b0-nightly.tgz","fileCount":167,"integrity":"sha512-8suhpJltlMq/ooMiVKkCkqjeD42wTWVEM5yfBx3s26B4+sMRv7vFve3CyXGr7e+h4I4boFqiB3YT9ySUIFhmkg==","signatures":[{"sig":"MEUCIQDUrCZR3a0yAbNQFeSlYp7aF3KKm3OgBKYlYA483Rid0wIgQQGINnfLpuK0LDlXICG0mSXA/+Y8Rtlay2pmDkf4ylo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230731152415-fdd3d9b0-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":663935},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230731152415-fdd3d9b0-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/9a8a88e2f52fa7eb0fdaa0ce9b1d20b4/blocksuite-virgo-0.0.0-20230731152415-fdd3d9b0-nightly.tgz","_integrity":"sha512-8suhpJltlMq/ooMiVKkCkqjeD42wTWVEM5yfBx3s26B4+sMRv7vFve3CyXGr7e+h4I4boFqiB3YT9ySUIFhmkg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230731152415-fdd3d9b0-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230731152415-fdd3d9b0-nightly_1690827933548_0.3826405992259361","host":"s3://npm-registry-packages"}},"0.0.0-20230731210752-161a8f85-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230731210752-161a8f85-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230731210752-161a8f85-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"94e90bbe9fddcd8c0c25a1ecd150a79d11f11700","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230731210752-161a8f85-nightly.tgz","fileCount":167,"integrity":"sha512-VEKfxyuxllZQ72IEIZ0OKqp7TcurKP7Rocub5da40qdDf80dM3ccBMG39/d0VZcyY5KWNcC0PRhIptdGCFWDyA==","signatures":[{"sig":"MEYCIQCc2qqhECkY7/PBh8KccJzcru9W/SGUGoVUMPRlFn/BgwIhAP0MbdFWt2wVi1EYmMOEjlYwv8I0MViOTAllxIPFGawc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230731210752-161a8f85-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":663935},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230731210752-161a8f85-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/7cb32ef62ac9e5ab78aeefc6fa9643e0/blocksuite-virgo-0.0.0-20230731210752-161a8f85-nightly.tgz","_integrity":"sha512-VEKfxyuxllZQ72IEIZ0OKqp7TcurKP7Rocub5da40qdDf80dM3ccBMG39/d0VZcyY5KWNcC0PRhIptdGCFWDyA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230731210752-161a8f85-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230731210752-161a8f85-nightly_1690849846319_0.2447333297819898","host":"s3://npm-registry-packages"}},"0.0.0-20230801164049-94862d4d-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230801164049-94862d4d-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230801164049-94862d4d-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"59a0b874f1fbc94b9924300795e2007a4c0c6d93","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230801164049-94862d4d-nightly.tgz","fileCount":167,"integrity":"sha512-z5HMSZtBxIt/FTq5h35vvaOmCcKO14DEaijeFJiwX+/hQxVqHyYfJSwfc3h7p0H8t2ZbqOIEf/1vc6JyM8OAqw==","signatures":[{"sig":"MEQCIB+VY375bv6y9mTs//E/Z7o09r8IqxXdUgiIOaF3O8IrAiA6UzUbQOBx5tJCzzl8VY8FRutG+dVHcSPsdGvFy96j2g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230801164049-94862d4d-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":666851},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230801164049-94862d4d-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/4717eb77b4a20fdfc2b8c146f7a9cd3c/blocksuite-virgo-0.0.0-20230801164049-94862d4d-nightly.tgz","_integrity":"sha512-z5HMSZtBxIt/FTq5h35vvaOmCcKO14DEaijeFJiwX+/hQxVqHyYfJSwfc3h7p0H8t2ZbqOIEf/1vc6JyM8OAqw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230801164049-94862d4d-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230801164049-94862d4d-nightly_1690935989016_0.11167285767923807","host":"s3://npm-registry-packages"}},"0.0.0-20230802170305-bdf398b9-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230802170305-bdf398b9-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230802170305-bdf398b9-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"3147d7638e408dffe08a9707063f102572c22675","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230802170305-bdf398b9-nightly.tgz","fileCount":167,"integrity":"sha512-QmUXtzBXr0eGZD5+vzijQnOjEq1DZejygnwpjmT2ivGOfc2HqIszOeb06WIHabZWf+UF5r55l/+OWgrYm8PAyQ==","signatures":[{"sig":"MEYCIQCurN0D3zSDm6MDcZqG2GAU1tLD8bsHID5oF5OgvhIT0gIhAOiDoJY8UgRjtPipQhkN6EDtw5k1L2ABE+MaiXnCkXn/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230802170305-bdf398b9-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":666726},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230802170305-bdf398b9-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/fff67b7cf41a65b3cad2c66a06500acd/blocksuite-virgo-0.0.0-20230802170305-bdf398b9-nightly.tgz","_integrity":"sha512-QmUXtzBXr0eGZD5+vzijQnOjEq1DZejygnwpjmT2ivGOfc2HqIszOeb06WIHabZWf+UF5r55l/+OWgrYm8PAyQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230802170305-bdf398b9-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230802170305-bdf398b9-nightly_1690996098273_0.7003958475034029","host":"s3://npm-registry-packages"}},"0.0.0-20230802182240-90c09b2e-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230802182240-90c09b2e-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230802182240-90c09b2e-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"15fae919b1f0f10ffce7af13f2e144a142e35003","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230802182240-90c09b2e-nightly.tgz","fileCount":167,"integrity":"sha512-G3clbSAI2KE+7WD+FHykSn1qDVLnWrO8duyDLqQQ9sJlyoCIjP4mwqPqc1WTS/1W+MsORhMKUJe1ZuyAfbKAig==","signatures":[{"sig":"MEQCIHKwlODo/rFAl3cHyj0OZQpaJqybKaYjVjqjvZi8tj8SAiBa92K0GWlST8Mi1l8pRtz9be+/NvauIziMzm+8i4UXJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230802182240-90c09b2e-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":669258},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230802182240-90c09b2e-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/df74b989dfb28695a30e078694d5304c/blocksuite-virgo-0.0.0-20230802182240-90c09b2e-nightly.tgz","_integrity":"sha512-G3clbSAI2KE+7WD+FHykSn1qDVLnWrO8duyDLqQQ9sJlyoCIjP4mwqPqc1WTS/1W+MsORhMKUJe1ZuyAfbKAig==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230802182240-90c09b2e-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230802182240-90c09b2e-nightly_1691000792676_0.14082109399080278","host":"s3://npm-registry-packages"}},"0.0.0-20230802184949-6ba78273-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230802184949-6ba78273-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230802184949-6ba78273-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"4991dccce6a8eb2b7bb465a1c1bf5a1f6df29341","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230802184949-6ba78273-nightly.tgz","fileCount":167,"integrity":"sha512-f+EfPtwGMW1AaJWoT0KrEYTCJ8FVbAD3qI32gVe8IWhc/udYhj1XJKOtPwxX6PvfzmYHN1OzWg6c0OLwwDJMhg==","signatures":[{"sig":"MEUCIGCOKD0v7/sqos2XegHNJbrU82WOFLEfHi9It/7Rz0GZAiEA/ovj9BDe/xSjjYUZ2vd4gFRGjOtycQ+GkpQk+lTyZB8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230802184949-6ba78273-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":669258},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230802184949-6ba78273-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/f2bd742d1a5bc74bfe7e6fc6c41eb320/blocksuite-virgo-0.0.0-20230802184949-6ba78273-nightly.tgz","_integrity":"sha512-f+EfPtwGMW1AaJWoT0KrEYTCJ8FVbAD3qI32gVe8IWhc/udYhj1XJKOtPwxX6PvfzmYHN1OzWg6c0OLwwDJMhg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230802184949-6ba78273-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230802184949-6ba78273-nightly_1691002393154_0.28332845001488405","host":"s3://npm-registry-packages"}},"0.0.0-20230802200139-381599c0-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230802200139-381599c0-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230802200139-381599c0-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"7f1cb332d99df77d86b404244ea7aa2d175e3fde","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230802200139-381599c0-nightly.tgz","fileCount":167,"integrity":"sha512-CrmHmmKifkhzEmsrTj4C4jlczr4k7WVYT/FTj7jtp6kbhPly/K83cwDtM99DhEMiHHSN/AhWMZU0BGVcC2jeyQ==","signatures":[{"sig":"MEQCIFMoPLZogRnE8Ub0VGbS0/xfYJg73a6rvSOw/57gmdvtAiBx34w9edWoEjejOIo8oLVqJMCk6T6yhoOx+mcFtn1rlw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230802200139-381599c0-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":669258},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230802200139-381599c0-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/2059b7d0dd9f58f6437cf372b1bcf9d1/blocksuite-virgo-0.0.0-20230802200139-381599c0-nightly.tgz","_integrity":"sha512-CrmHmmKifkhzEmsrTj4C4jlczr4k7WVYT/FTj7jtp6kbhPly/K83cwDtM99DhEMiHHSN/AhWMZU0BGVcC2jeyQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230802200139-381599c0-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230802200139-381599c0-nightly_1691006731703_0.14877977738057657","host":"s3://npm-registry-packages"}},"0.0.0-20230803131414-1e504e17-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230803131414-1e504e17-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230803131414-1e504e17-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"fefcb3e564fd10274a5c284c33e3acdc1a34c2a4","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230803131414-1e504e17-nightly.tgz","fileCount":167,"integrity":"sha512-XGPtbT2rfCxjQJCCR7V1kZrmZf4JjPHIuoQmR0wAotfQ77X83c/xguNgv9GSN1RenUAd6/mRHrBGUACSwkEYTQ==","signatures":[{"sig":"MEUCIGexWhLwksduwv6ZsZKP4j3w2gyze9Ea6XL3hHHY867OAiEAp1kdMXlk4vbIJLN+CoqZU2+HSMkCICCdBlZuWSGzblk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230803131414-1e504e17-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":672576},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230803131414-1e504e17-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/4424df263582bb67ea7467bb08df2dd8/blocksuite-virgo-0.0.0-20230803131414-1e504e17-nightly.tgz","_integrity":"sha512-XGPtbT2rfCxjQJCCR7V1kZrmZf4JjPHIuoQmR0wAotfQ77X83c/xguNgv9GSN1RenUAd6/mRHrBGUACSwkEYTQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230803131414-1e504e17-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230803131414-1e504e17-nightly_1691108873837_0.7729763695032539","host":"s3://npm-registry-packages"}},"0.0.0-20230804013018-286d1a51-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230804013018-286d1a51-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230804013018-286d1a51-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"d47d1f9e6c312278b1f3c31c7c2197b38d92a3b7","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230804013018-286d1a51-nightly.tgz","fileCount":167,"integrity":"sha512-2RDfWsWyoRMEybXofuj/yMmwmyRGhGLTPo1huC1H//xCO/1fr3CrN8LdYeEDwj6wb4L5Zo3HxfLRHxS3/zCVNQ==","signatures":[{"sig":"MEYCIQDPEIRPSR2lG55KzWRRQzB/Kkt5S9p7TNgzsyuYrbCv/QIhAIpfKQ/cYRe5xvU3VEsddzJQlhJndTSuLQq6nn84LvM/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230804013018-286d1a51-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":673432},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230804013018-286d1a51-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/07ddc96ba044a33ee6723076bce793d6/blocksuite-virgo-0.0.0-20230804013018-286d1a51-nightly.tgz","_integrity":"sha512-2RDfWsWyoRMEybXofuj/yMmwmyRGhGLTPo1huC1H//xCO/1fr3CrN8LdYeEDwj6wb4L5Zo3HxfLRHxS3/zCVNQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230804013018-286d1a51-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230804013018-286d1a51-nightly_1691113886760_0.5914612664646317","host":"s3://npm-registry-packages"}},"0.0.0-20230804034223-6b97c3b7-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230804034223-6b97c3b7-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230804034223-6b97c3b7-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"46ec3ae11f8a07048432c84cbdc17a3d0fe47b8b","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230804034223-6b97c3b7-nightly.tgz","fileCount":167,"integrity":"sha512-frb/b80upECicbh5blY1cdzsuIxX9uh3hcVbJcS0+DVkYhN2i1Y+sgSZsr20EiEVlEL+Ndq6gnpvS69O5JuNPA==","signatures":[{"sig":"MEYCIQClTOF656cE3EiZjWogusRNU8EJjiabHXDHLXFnDy36CAIhAJq4eBgpYqH+d2gRlOiJai6Ue1yc3rXEKZirIEb7UzRX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230804034223-6b97c3b7-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":673874},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230804034223-6b97c3b7-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/729cf6cfa2ef79954c2f64cebb39cabb/blocksuite-virgo-0.0.0-20230804034223-6b97c3b7-nightly.tgz","_integrity":"sha512-frb/b80upECicbh5blY1cdzsuIxX9uh3hcVbJcS0+DVkYhN2i1Y+sgSZsr20EiEVlEL+Ndq6gnpvS69O5JuNPA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230804034223-6b97c3b7-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230804034223-6b97c3b7-nightly_1691122425596_0.8075609130886154","host":"s3://npm-registry-packages"}},"0.0.0-20230804134340-34d14df8-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230804134340-34d14df8-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230804134340-34d14df8-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"f420b7cd79c57f291c27382d1b75ce09613c2603","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230804134340-34d14df8-nightly.tgz","fileCount":167,"integrity":"sha512-am7F01P3WiZ6Ltal3bWsFS2R2ArR46pun4gue4/ndHsF4bhWsHtMIreWqT6YnUuB0+G3RzCfrG9LWwVp8BhGlA==","signatures":[{"sig":"MEUCIDIrze8iucGAmF0jVLt4p4yj8zsZapcM2ec84NwjzB1PAiEApmeDbJ6gYIrptwDN+NvOLajL20BRtiOJ+a687qYf1iE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230804134340-34d14df8-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":674235},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230804134340-34d14df8-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/c5e9b66f3c32c48c6eeb2afa6fb9855e/blocksuite-virgo-0.0.0-20230804134340-34d14df8-nightly.tgz","_integrity":"sha512-am7F01P3WiZ6Ltal3bWsFS2R2ArR46pun4gue4/ndHsF4bhWsHtMIreWqT6YnUuB0+G3RzCfrG9LWwVp8BhGlA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230804134340-34d14df8-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230804134340-34d14df8-nightly_1691170856853_0.42238030445777697","host":"s3://npm-registry-packages"}},"0.0.0-20230804190636-37f66904-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230804190636-37f66904-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230804190636-37f66904-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"e7ebe9026fd81989f176d0b7059572875a439552","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230804190636-37f66904-nightly.tgz","fileCount":167,"integrity":"sha512-h8hOXEURJYqFkipmHFCVmmhBp4+tqYx+MqUINnK7iaGLotqL/L/d00/xtcH7nf0ZWxpaobodoks+CNLq1dqS9Q==","signatures":[{"sig":"MEUCIQCXWKBpJn/09NBdMHDJv9Eh0Yeo2SZiNUbSsh6DIXjfOQIgfbC8XRMrX+UzI+sBGMNeZcBv+3Wvhtxq6+pqPt1CIT4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230804190636-37f66904-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":674235},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230804190636-37f66904-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/1419f30db2ab531a157045a180819c0f/blocksuite-virgo-0.0.0-20230804190636-37f66904-nightly.tgz","_integrity":"sha512-h8hOXEURJYqFkipmHFCVmmhBp4+tqYx+MqUINnK7iaGLotqL/L/d00/xtcH7nf0ZWxpaobodoks+CNLq1dqS9Q==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230804190636-37f66904-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230804190636-37f66904-nightly_1691176262288_0.8776007359538807","host":"s3://npm-registry-packages"}},"0.0.0-20230805071237-d2d41549-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230805071237-d2d41549-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230805071237-d2d41549-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"a254556c8425b3c413b80d8b7eeb50e61ba7bcbc","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230805071237-d2d41549-nightly.tgz","fileCount":167,"integrity":"sha512-N5HaNZR5B5PLwebMDtRtNgM/lB/yGn0rmPUeD8JbjehCoxIeeSj8f5sYyogcTlVaB4woKkERCzLa85/0AnpgMA==","signatures":[{"sig":"MEQCIEKcmd/1kkAVytmoMiSbTezjxXPHQKzQHTco9fRnTlNmAiAc4teh4akCFubKrcbP/JGCSH+Vgs+gfmUIH70hHHLHyg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230805071237-d2d41549-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":677082},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230805071237-d2d41549-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/69586cfc5fdb8cf78d770ce6f2759e23/blocksuite-virgo-0.0.0-20230805071237-d2d41549-nightly.tgz","_integrity":"sha512-N5HaNZR5B5PLwebMDtRtNgM/lB/yGn0rmPUeD8JbjehCoxIeeSj8f5sYyogcTlVaB4woKkERCzLa85/0AnpgMA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230805071237-d2d41549-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230805071237-d2d41549-nightly_1691281522736_0.023618742081162436","host":"s3://npm-registry-packages"}},"0.0.0-20230806233219-17ca6eee-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230806233219-17ca6eee-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230806233219-17ca6eee-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"65e3f81819ce2e6751961edc88c3d91184abcf80","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230806233219-17ca6eee-nightly.tgz","fileCount":167,"integrity":"sha512-19CZpCzc2oGk4uJF44l1XQ/1JhJPLtJJDRD66YkCYHObMbwi8qVb0mmz9zg35hZU9i4CiKQHf8u+hJsVSCwxHg==","signatures":[{"sig":"MEQCIHf7G+NnXxEQ3UO/Zl6kx3kCxhOXvkoDe3mbziPAn0STAiAr9fxiLjTLSYEgkHeIppdDRSuD32ZslwkTDf53s1ksxg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230806233219-17ca6eee-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":677263},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230806233219-17ca6eee-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/e3799b95d972d70747188cf6ff4e5b7b/blocksuite-virgo-0.0.0-20230806233219-17ca6eee-nightly.tgz","_integrity":"sha512-19CZpCzc2oGk4uJF44l1XQ/1JhJPLtJJDRD66YkCYHObMbwi8qVb0mmz9zg35hZU9i4CiKQHf8u+hJsVSCwxHg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230806233219-17ca6eee-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230806233219-17ca6eee-nightly_1691367841762_0.8244187568689776","host":"s3://npm-registry-packages"}},"0.0.0-20230807164933-9f6fb698-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230807164933-9f6fb698-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230807164933-9f6fb698-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"bb45ece8a9ebdc9bb1735ef202d33c4ce8aa60f7","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230807164933-9f6fb698-nightly.tgz","fileCount":167,"integrity":"sha512-VxBbUOP3As9JjYc/pfnC2ABftnlY0y3V32Zg2NN98rhjvVBU8W+jkxb3bYVgVxmI7RnmzN/OsLe3YbuLj891rg==","signatures":[{"sig":"MEYCIQCIY6B7IqaVtGQOepLbwwVfF2JWquKfzTxWMHRkbPJcGwIhAP6qmJYJLHfd91cgoV7eeWvKAtkS73q4A/Grlt3Hb98j","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230807164933-9f6fb698-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":680337},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230807164933-9f6fb698-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/0a475c43141a6220fc0f49caa955b15d/blocksuite-virgo-0.0.0-20230807164933-9f6fb698-nightly.tgz","_integrity":"sha512-VxBbUOP3As9JjYc/pfnC2ABftnlY0y3V32Zg2NN98rhjvVBU8W+jkxb3bYVgVxmI7RnmzN/OsLe3YbuLj891rg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230807164933-9f6fb698-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230807164933-9f6fb698-nightly_1691454423250_0.6371203508400902","host":"s3://npm-registry-packages"}},"0.0.0-20230808052934-e80a740d-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230808052934-e80a740d-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230808052934-e80a740d-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"afa69e72b79aa62e8a90ec063670b97984b919db","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230808052934-e80a740d-nightly.tgz","fileCount":167,"integrity":"sha512-Ltj137XDRiU5uHZtibuLKb5cH9UfukCGZZoMzdAhxHSuDeiuoq0fN66lIkh2TwDnxWj/h7jUEV4mN74W4Lxw1A==","signatures":[{"sig":"MEQCIDZveNgQXuwmXRoqI0G1d6YrjzEMLqnbfC9zbJNWMJ1YAiAR96K3NrV+mbuWx14B6W8YkhdHmlFhZFMaCug2yiBEMA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230808052934-e80a740d-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":680762},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230808052934-e80a740d-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/089ea8c11c8c0b3dc3a454fd32fd4aaf/blocksuite-virgo-0.0.0-20230808052934-e80a740d-nightly.tgz","_integrity":"sha512-Ltj137XDRiU5uHZtibuLKb5cH9UfukCGZZoMzdAhxHSuDeiuoq0fN66lIkh2TwDnxWj/h7jUEV4mN74W4Lxw1A==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230808052934-e80a740d-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230808052934-e80a740d-nightly_1691473205217_0.7834067073281292","host":"s3://npm-registry-packages"}},"0.0.0-20230808131052-ef3445a9-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230808131052-ef3445a9-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230808131052-ef3445a9-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"6735816f851dc4c8b3f78fc13e23d3b827a1fd7e","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230808131052-ef3445a9-nightly.tgz","fileCount":167,"integrity":"sha512-WGmmIWr59p3jnVH2vsFip4zyqsbQTEX+/blY2PKPxEpyVF/pDhCl7ne2WHaSAUmv9yzhR4l/NXwL4RZhAC6Eog==","signatures":[{"sig":"MEQCIGzr0vfLbsO5dsWClmY9DtmDWgHGWIcsEUH9I5KH05zoAiBCUxOXTpw5zjzuWk/xye8x4VaNerjgWHRnh9GyAjH0Lg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230808131052-ef3445a9-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":681293},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230808131052-ef3445a9-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/0c31ca19e32e23ca8d301850b27e7b40/blocksuite-virgo-0.0.0-20230808131052-ef3445a9-nightly.tgz","_integrity":"sha512-WGmmIWr59p3jnVH2vsFip4zyqsbQTEX+/blY2PKPxEpyVF/pDhCl7ne2WHaSAUmv9yzhR4l/NXwL4RZhAC6Eog==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230808131052-ef3445a9-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230808131052-ef3445a9-nightly_1691507951752_0.47893592193660584","host":"s3://npm-registry-packages"}},"0.0.0-20230808153317-1779f7fe-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230808153317-1779f7fe-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230808153317-1779f7fe-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"fbaec59255a93841ddc7865652e5007480e0ffa5","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230808153317-1779f7fe-nightly.tgz","fileCount":167,"integrity":"sha512-QokEjT8uxFyresIUoW9mTmt9oj2lmcSyQXdRa2FsLTriPdZ3KM1sZzWINfNQ3alMhNiHOkukwiJPolSOL9NGAQ==","signatures":[{"sig":"MEUCIBmKykkkOQgVARbwVj9YLBJA1IH0sCOtnoxRX+H3BJvnAiEAr3S+ahXBQY2AQqq/7lA4V10+SxS8YKU0uplVsIsZkfY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230808153317-1779f7fe-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":681293},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230808153317-1779f7fe-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/7374b9122d90b4793862cd4d22a4ae08/blocksuite-virgo-0.0.0-20230808153317-1779f7fe-nightly.tgz","_integrity":"sha512-QokEjT8uxFyresIUoW9mTmt9oj2lmcSyQXdRa2FsLTriPdZ3KM1sZzWINfNQ3alMhNiHOkukwiJPolSOL9NGAQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230808153317-1779f7fe-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230808153317-1779f7fe-nightly_1691540953705_0.941988494614977","host":"s3://npm-registry-packages"}},"0.0.0-20230809030546-32e6e21d-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230809030546-32e6e21d-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230809030546-32e6e21d-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"ab79ee02b4383ee2b059fa2a9aad4a779c7c8085","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230809030546-32e6e21d-nightly.tgz","fileCount":167,"integrity":"sha512-CE9COPEBgDZR6N+IYA9inA2mptvbdEr3m1cpYSNoezqMMnu/fmO7QtBr0eomSDO2P4n8nFYPaytRiytRt3kdDw==","signatures":[{"sig":"MEUCIDHocpwUbawnEliQOVbFekXxbnSKsNkHuqy951wpsBBjAiEA5jPGYyJ1HmbBCKxCBeXP+TdT1zDs8S8yuCwbnvHU6y0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230809030546-32e6e21d-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":681293},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230809030546-32e6e21d-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/951e758d342bbea0934f5c43207e68ae/blocksuite-virgo-0.0.0-20230809030546-32e6e21d-nightly.tgz","_integrity":"sha512-CE9COPEBgDZR6N+IYA9inA2mptvbdEr3m1cpYSNoezqMMnu/fmO7QtBr0eomSDO2P4n8nFYPaytRiytRt3kdDw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230809030546-32e6e21d-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230809030546-32e6e21d-nightly_1691551068411_0.6558738549038989","host":"s3://npm-registry-packages"}},"0.0.0-20230809173434-253855dd-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230809173434-253855dd-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230809173434-253855dd-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"f995f9c7e55260a56b8be5667df59cb680be14c4","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230809173434-253855dd-nightly.tgz","fileCount":167,"integrity":"sha512-rejAzNu/JDtoYc2Pu3f4A2+HSubmDLJ+zYIGddZXCErcQXkB01T47B/QZuQUREC7WAhIyFdipm0Yc71ctQsPiQ==","signatures":[{"sig":"MEUCIQDs823MQOgmGFzHmvPEKhajGzGNRIGjX0/wE+J8Tp2nLAIgNk9AMo0TY/eL45qC509BKwkgoFiZyv5sqqluYjiMZGE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230809173434-253855dd-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":682884},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230809173434-253855dd-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/68c29f5719d99f3c23597fcc19989b23/blocksuite-virgo-0.0.0-20230809173434-253855dd-nightly.tgz","_integrity":"sha512-rejAzNu/JDtoYc2Pu3f4A2+HSubmDLJ+zYIGddZXCErcQXkB01T47B/QZuQUREC7WAhIyFdipm0Yc71ctQsPiQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230809173434-253855dd-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230809173434-253855dd-nightly_1691627231021_0.06638618119362194","host":"s3://npm-registry-packages"}},"0.0.0-20230810005427-25adb757-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230810005427-25adb757-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230810005427-25adb757-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"90a2a7a1be1312c03e309b25093c0a3170889d1c","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230810005427-25adb757-nightly.tgz","fileCount":167,"integrity":"sha512-keffIf7X+p747g0NvWGp2rWaIyAUIL5gTUxEUAUF1h8tMaJdDoKQ3pCsCe/rdeUnU+o+3lmw9kzs7OEgN76VrQ==","signatures":[{"sig":"MEYCIQCb5UedtpgyVNE8Q3nvEvUqpHxVI+g/CddZxfpw9Aw+dQIhALtH0+F6YIiv2Hj+pNd34qmf94fqi/CZi374z92ATas6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230810005427-25adb757-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":682884},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230810005427-25adb757-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/89c6c0152a3ae9c1eb139c3f65cf9ae3/blocksuite-virgo-0.0.0-20230810005427-25adb757-nightly.tgz","_integrity":"sha512-keffIf7X+p747g0NvWGp2rWaIyAUIL5gTUxEUAUF1h8tMaJdDoKQ3pCsCe/rdeUnU+o+3lmw9kzs7OEgN76VrQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230810005427-25adb757-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230810005427-25adb757-nightly_1691630695143_0.007914360121483721","host":"s3://npm-registry-packages"}},"0.0.0-20230810154852-8a8eccea-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230810154852-8a8eccea-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230810154852-8a8eccea-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"ab1a69336b5c16048e93b6ab32eeefa70a111d53","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230810154852-8a8eccea-nightly.tgz","fileCount":167,"integrity":"sha512-R2zOkPOytMz8uszu8aY+nSYjoMqH91t0fzmk6ZlU3wOIIH1xUQT83FZZkeZkV6g1hOS7BBD6p480fzAVwenB7g==","signatures":[{"sig":"MEYCIQCOGKDbcyTLHRjt3rd+Yh16kNtjysVPzMnqjf8eNZGYBQIhANmHw9tzmyW6Qqp1Xzb+5i049CdPnX8SLZcjWHEVELr3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230810154852-8a8eccea-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":683589},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230810154852-8a8eccea-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/205d2c37c00d98e700f2002023fcf1df/blocksuite-virgo-0.0.0-20230810154852-8a8eccea-nightly.tgz","_integrity":"sha512-R2zOkPOytMz8uszu8aY+nSYjoMqH91t0fzmk6ZlU3wOIIH1xUQT83FZZkeZkV6g1hOS7BBD6p480fzAVwenB7g==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230810154852-8a8eccea-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230810154852-8a8eccea-nightly_1691682875989_0.15730003420897032","host":"s3://npm-registry-packages"}},"0.0.0-20230811012734-9620bf0b-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230811012734-9620bf0b-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230811012734-9620bf0b-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"067f157642645bdab1c55fa3f9260fa1807ac35c","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230811012734-9620bf0b-nightly.tgz","fileCount":167,"integrity":"sha512-1tvdIxZc8QE0pZPv3f3iWVr3P4sM5gLFkM059IDYekf4/bS519A5bkoZxiL6eU+uwmqBI5dqWKfJZipj97vVhA==","signatures":[{"sig":"MEUCIQCl5+TYoUSmJpgWtC1LinlBuBKOIsDhntx7YQpXU2aKmgIgfG3MXg/dntK7B3DfHays5cbINZErvpfgCoEmyOaEe/A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230811012734-9620bf0b-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":683589},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230811012734-9620bf0b-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/197ffded1edd0d725daa4fe3f037fa43/blocksuite-virgo-0.0.0-20230811012734-9620bf0b-nightly.tgz","_integrity":"sha512-1tvdIxZc8QE0pZPv3f3iWVr3P4sM5gLFkM059IDYekf4/bS519A5bkoZxiL6eU+uwmqBI5dqWKfJZipj97vVhA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230811012734-9620bf0b-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230811012734-9620bf0b-nightly_1691717730402_0.9094555660878656","host":"s3://npm-registry-packages"}},"0.0.0-20230811080927-c830f4d4-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230811080927-c830f4d4-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230811080927-c830f4d4-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"42640bc9d3762cda152fc19268d3da618c5f9d05","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230811080927-c830f4d4-nightly.tgz","fileCount":167,"integrity":"sha512-/lMSQN7AiO0l0AcbfbRPyMBXo8X3JIg/kLPpqeQfgD5QQjRM/9ARahRSHmEzs2Lj6xtCXY3qKhPjJdVuFzk6aA==","signatures":[{"sig":"MEUCIQCeL4DtwLXitG6EAMZZ+xw9nQPnBhzeJ+ihRhHrwuPf1AIgKoHyXbVFn0u+S+kyFP4bV3+Lsjc8jIeqMT+YzwM4Xs0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230811080927-c830f4d4-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":685140},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230811080927-c830f4d4-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/63c78b3a145ae0e3d15677e8c6c52237/blocksuite-virgo-0.0.0-20230811080927-c830f4d4-nightly.tgz","_integrity":"sha512-/lMSQN7AiO0l0AcbfbRPyMBXo8X3JIg/kLPpqeQfgD5QQjRM/9ARahRSHmEzs2Lj6xtCXY3qKhPjJdVuFzk6aA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230811080927-c830f4d4-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230811080927-c830f4d4-nightly_1691741729398_0.013435711698109865","host":"s3://npm-registry-packages"}},"0.0.0-20230811201552-f37162ea-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230811201552-f37162ea-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230811201552-f37162ea-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"8567e62e626a811ff6ca237de0e2790ae0157172","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230811201552-f37162ea-nightly.tgz","fileCount":167,"integrity":"sha512-c4nidx7yTEqJj+t8HpDAgoJJhSsbTHpaI4DSzsWRuZzP5+0OgHDDatXE0aMI8RQ00r6Q3pkn1xKbI/VqFf6QCw==","signatures":[{"sig":"MEUCIQDjnGSRekWb+vpIR0hgZfARkXg+8uIoM15E/VxqCBM3ZgIgBOORtPl97eLucjAxY8IkgHs3BcIR9gRIhdSX9y/HCUw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230811201552-f37162ea-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":688304},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230811201552-f37162ea-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/be5f016b05eae3938b029f3d4c1dcacd/blocksuite-virgo-0.0.0-20230811201552-f37162ea-nightly.tgz","_integrity":"sha512-c4nidx7yTEqJj+t8HpDAgoJJhSsbTHpaI4DSzsWRuZzP5+0OgHDDatXE0aMI8RQ00r6Q3pkn1xKbI/VqFf6QCw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230811201552-f37162ea-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230811201552-f37162ea-nightly_1691785277995_0.12255837887667309","host":"s3://npm-registry-packages"}},"0.0.0-20230811212833-5be585ee-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230811212833-5be585ee-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230811212833-5be585ee-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"4d09d41998eb522614b9b1fedd271229c1c83265","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230811212833-5be585ee-nightly.tgz","fileCount":167,"integrity":"sha512-yx2Iufs9tqea22n4y/jYK8wkVSb7bqDQRbdLWT0kTAaLcs9+hqcJwPhYB8amM2ngPjZ+KdgzVGpEgqtv1izAKw==","signatures":[{"sig":"MEQCIEO0Q2S6LnTWkr6xV8oiKUtnyp9Pil3qhMDp/KbWgKcpAiAT6m2UwaNfe0UpZm7IEfemJjWWxKVMuvoaxizaAWqBKQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230811212833-5be585ee-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":688304},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230811212833-5be585ee-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/9127f90402c22225bbc7db9c79a3da1c/blocksuite-virgo-0.0.0-20230811212833-5be585ee-nightly.tgz","_integrity":"sha512-yx2Iufs9tqea22n4y/jYK8wkVSb7bqDQRbdLWT0kTAaLcs9+hqcJwPhYB8amM2ngPjZ+KdgzVGpEgqtv1izAKw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230811212833-5be585ee-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230811212833-5be585ee-nightly_1691799730287_0.983773200074755","host":"s3://npm-registry-packages"}},"0.0.0-20230812155032-911b0176-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230812155032-911b0176-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230812155032-911b0176-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"81082c02566a6516ee560dfa686a582b2ffddea4","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230812155032-911b0176-nightly.tgz","fileCount":167,"integrity":"sha512-qh3stiqTwWlv/3c2XRcX0DJDyru9tBxyCinTt01eVwJNaGYBn8SMr8uw9gZ5MG/3DSzd5U8h0oAH948dW+GnWA==","signatures":[{"sig":"MEUCIQDP8aj1E0jbEkotYKUl2wDBgT2bAXokMPMSz1flxbE+tgIgWeFpmrpKxd25xKtcT3lEGKiZ9L4bweT4i1Ou6p2PKXQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230812155032-911b0176-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":688289},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230812155032-911b0176-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/557be84ffad439be8c8a89860147c8be/blocksuite-virgo-0.0.0-20230812155032-911b0176-nightly.tgz","_integrity":"sha512-qh3stiqTwWlv/3c2XRcX0DJDyru9tBxyCinTt01eVwJNaGYBn8SMr8uw9gZ5MG/3DSzd5U8h0oAH948dW+GnWA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230812155032-911b0176-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230812155032-911b0176-nightly_1691886312795_0.6669596098563071","host":"s3://npm-registry-packages"}},"0.0.0-20230814000457-ce469d9b-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230814000457-ce469d9b-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230814000457-ce469d9b-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"0c4c216cc896b84c9a2357cfa35719dfca6c78bd","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230814000457-ce469d9b-nightly.tgz","fileCount":167,"integrity":"sha512-6Eg7szNNa/UTY3xSgNGx+IE5o99DrFFFaRwQrzAqVAZKV/GsyJ0wAW7XrS4C2Q5m6HIxrljBE0QoBUttuwGO2Q==","signatures":[{"sig":"MEYCIQDqcSPcmh/V+COUv+xiPx6YB4ITIrhtGl3/85GZX7yMdwIhAKTEQ/EPFWj7ALU/+4Rld1oBPxoewKx15QIFf3RZ1GMu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230814000457-ce469d9b-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":689038},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230814000457-ce469d9b-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/857b1e81b967603c1151b439c3692d24/blocksuite-virgo-0.0.0-20230814000457-ce469d9b-nightly.tgz","_integrity":"sha512-6Eg7szNNa/UTY3xSgNGx+IE5o99DrFFFaRwQrzAqVAZKV/GsyJ0wAW7XrS4C2Q5m6HIxrljBE0QoBUttuwGO2Q==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230814000457-ce469d9b-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230814000457-ce469d9b-nightly_1691972698869_0.3004781798228957","host":"s3://npm-registry-packages"}},"0.0.0-20230814155455-ceb5d5d8-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230814155455-ceb5d5d8-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230814155455-ceb5d5d8-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"d48b5ca443db198b545f6a52ac7b3e291e60cfb2","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230814155455-ceb5d5d8-nightly.tgz","fileCount":167,"integrity":"sha512-no0d8AMrZIAfmIirYOFgtvubJorTbm7nROpvM6auHlbbNA29m1RaNWe8cXCPXspJEryN38Y0pUgToV9joKniZg==","signatures":[{"sig":"MEUCIQCtpWJfAVrv1ZqGQcKm0N3CsOa9ImxrRXAsvOeus0hphgIgXIDv7cjzea7uuhHVRsJN9FFFUetOffMmeuXGEU0NRj0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230814155455-ceb5d5d8-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":689508},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230814155455-ceb5d5d8-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/3b56a95f87bd74ff41817287de40a837/blocksuite-virgo-0.0.0-20230814155455-ceb5d5d8-nightly.tgz","_integrity":"sha512-no0d8AMrZIAfmIirYOFgtvubJorTbm7nROpvM6auHlbbNA29m1RaNWe8cXCPXspJEryN38Y0pUgToV9joKniZg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230814155455-ceb5d5d8-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230814155455-ceb5d5d8-nightly_1692036359125_0.92623815319185","host":"s3://npm-registry-packages"}},"0.0.0-20230815165042-01c49091-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230815165042-01c49091-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230815165042-01c49091-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"19a852efe3bc07ffa65bc867d64b2144eaa8a1ac","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230815165042-01c49091-nightly.tgz","fileCount":167,"integrity":"sha512-f5L8hxpxE7YSqnsJgkgPL0ZDLQBSWTyULVytJa/gEL5LARdGxBfX23VYgzXVjELHHLOfkY2xBBI9M9aXDkklmw==","signatures":[{"sig":"MEQCIHjBR7+MMeEp+yQnKYdhGH1HnXLVdeVQgnvlHQtpFzDVAiAeTXR/+WywgUfJehoy+ffdZ2guWVmgnKDgl0DlZIVPiQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230815165042-01c49091-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":502802},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230815165042-01c49091-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/cae6c8ca15d3702e2908309824c30a52/blocksuite-virgo-0.0.0-20230815165042-01c49091-nightly.tgz","_integrity":"sha512-f5L8hxpxE7YSqnsJgkgPL0ZDLQBSWTyULVytJa/gEL5LARdGxBfX23VYgzXVjELHHLOfkY2xBBI9M9aXDkklmw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230815165042-01c49091-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230815165042-01c49091-nightly_1692121920957_0.430291982669037","host":"s3://npm-registry-packages"}},"0.0.0-20230815234451-afff0017-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230815234451-afff0017-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230815234451-afff0017-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"ce2bff1a6012fa140b93107a5a4a3ff54abf64d9","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230815234451-afff0017-nightly.tgz","fileCount":167,"integrity":"sha512-KCp63u0Vs0Z9qVNWbVlnJW9FW9JLsnR0/kjyWm0A7sSaTfMCEjj6VA+Z+3kBBnxbVC+gjiA63xiCbvfl9O0oeg==","signatures":[{"sig":"MEUCIDdQO7Rf3TyWPyHVVtrO9Nvr4GDLUxZx53SBcvW+DNfYAiEA470dDIFDPXUIstXU0C5BjyidfDlTmdlTiO1OdQMioOM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230815234451-afff0017-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":502802},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230815234451-afff0017-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/803ed394f38ff174b2d9ef56a8cbe525/blocksuite-virgo-0.0.0-20230815234451-afff0017-nightly.tgz","_integrity":"sha512-KCp63u0Vs0Z9qVNWbVlnJW9FW9JLsnR0/kjyWm0A7sSaTfMCEjj6VA+Z+3kBBnxbVC+gjiA63xiCbvfl9O0oeg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230815234451-afff0017-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230815234451-afff0017-nightly_1692145344181_0.30158722781998315","host":"s3://npm-registry-packages"}},"0.0.0-20230816045733-6ec53493-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230816045733-6ec53493-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230816045733-6ec53493-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"b2612a6995e0796fc6ba5c3802ee274e059f6779","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230816045733-6ec53493-nightly.tgz","fileCount":167,"integrity":"sha512-4xbMBZzwbUwY0oqrEHIe2DyVS86+c/Wote2Apm9ojclizhJTbyHfZOMc+DGhkKTtyHzpG9z0Li2zpqmYiQwqFQ==","signatures":[{"sig":"MEUCIB1dQtKseHLUi3rf1sJAn6ddbcuh/r83AudubHmtfZmZAiEA7y8e14q2L9MZZFrt+oIFoxc87TAmp27xJcZgM+vCgZE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230816045733-6ec53493-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":502802},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230816045733-6ec53493-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/709a0414d4a5b129c5bcd813968b4e45/blocksuite-virgo-0.0.0-20230816045733-6ec53493-nightly.tgz","_integrity":"sha512-4xbMBZzwbUwY0oqrEHIe2DyVS86+c/Wote2Apm9ojclizhJTbyHfZOMc+DGhkKTtyHzpG9z0Li2zpqmYiQwqFQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230816045733-6ec53493-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230816045733-6ec53493-nightly_1692165082259_0.6094738920142564","host":"s3://npm-registry-packages"}},"0.0.0-20230816061955-2d98f0fc-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230816061955-2d98f0fc-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230816061955-2d98f0fc-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"7c068eea6b8f8c11dd5f96f9eda0366603f9d83d","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230816061955-2d98f0fc-nightly.tgz","fileCount":167,"integrity":"sha512-bJeVOnX2vGchv51whvPHX6YZgF+htJc/zE6zihsVjxtSht+8b3hZ6Snpc2yOfGw1Re1rFGW4ZZBKi6+35PgndA==","signatures":[{"sig":"MEUCIQCF1VqCltcumiXvyfLqzR8GkquJw/jUx171cyNZPpvYhAIgF6tkVDyPWWTOFcN01IR5e59foac0yr5qRccJsyGaCXQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230816061955-2d98f0fc-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":502802},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230816061955-2d98f0fc-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/14d473b2eabe432c0ff03a0ca128b86c/blocksuite-virgo-0.0.0-20230816061955-2d98f0fc-nightly.tgz","_integrity":"sha512-bJeVOnX2vGchv51whvPHX6YZgF+htJc/zE6zihsVjxtSht+8b3hZ6Snpc2yOfGw1Re1rFGW4ZZBKi6+35PgndA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230816061955-2d98f0fc-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230816061955-2d98f0fc-nightly_1692167328668_0.0657376503629743","host":"s3://npm-registry-packages"}},"0.0.0-20230816070819-d8ef2663-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230816070819-d8ef2663-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230816070819-d8ef2663-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"43fce97b68c2910f461d1be1e12a944aaeb69b68","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230816070819-d8ef2663-nightly.tgz","fileCount":167,"integrity":"sha512-KWqPGrrQ8YWHR6TCxDQ8cm7Z9YKzIrWw6Mfm3pViz26G7JbwJW0qCynGTQ/92VY8yF7dwHobwQxH5ASa8/+YjA==","signatures":[{"sig":"MEYCIQDPCYe2SFbeUnPnwdgQKH18IkXFzILqpF3OrYG0WlZGSQIhANP68WeI7C2eSuK9BjwPR74ca6n3apKAuy/7ZmdCYjNU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230816070819-d8ef2663-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":502802},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230816070819-d8ef2663-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/37d765c6b911cd811e642a25cfb297e0/blocksuite-virgo-0.0.0-20230816070819-d8ef2663-nightly.tgz","_integrity":"sha512-KWqPGrrQ8YWHR6TCxDQ8cm7Z9YKzIrWw6Mfm3pViz26G7JbwJW0qCynGTQ/92VY8yF7dwHobwQxH5ASa8/+YjA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230816070819-d8ef2663-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230816070819-d8ef2663-nightly_1692170059162_0.531363971814782","host":"s3://npm-registry-packages"}},"0.0.0-20230816072739-2ecb84eb-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230816072739-2ecb84eb-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230816072739-2ecb84eb-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"9db75e34f740975af546199b96203554657cba7d","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230816072739-2ecb84eb-nightly.tgz","fileCount":38,"integrity":"sha512-vIiNURsIRdzVCAercV5I/SNSWRdtQtsbChi+G468MWR1o+5YE1YSGEZYTRqK7pRP9NNB9Nbqq/Cp67WWhQja0A==","signatures":[{"sig":"MEUCIQC22wiDaJDVel4FQA1XgHPQc5R2JtUWXEeFHNT+IV29IgIgFmpQ3/axwJz+/XJd2edQmXocd9vj1OVwr5tBjL2xdms=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230816072739-2ecb84eb-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":144556},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230816072739-2ecb84eb-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/a29494e6beb0585a31ff59cdb388b960/blocksuite-virgo-0.0.0-20230816072739-2ecb84eb-nightly.tgz","_integrity":"sha512-vIiNURsIRdzVCAercV5I/SNSWRdtQtsbChi+G468MWR1o+5YE1YSGEZYTRqK7pRP9NNB9Nbqq/Cp67WWhQja0A==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230816072739-2ecb84eb-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230816072739-2ecb84eb-nightly_1692171053553_0.23995112747251168","host":"s3://npm-registry-packages"}},"0.0.0-20230816080418-bdf43f08-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230816080418-bdf43f08-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230816080418-bdf43f08-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"d13741b45569b49e622eeb8979bd80547767fd5f","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230816080418-bdf43f08-nightly.tgz","fileCount":167,"integrity":"sha512-ovVtkCC6CD3WEZLqqAiT9dEWxZLlwh3x4uHDKsAXacJxOhmJpmhCyjdK5Jsj8b1HWwtUww3ZjJ5GpRbgLRqNRg==","signatures":[{"sig":"MEUCIAPkQeWL0woaknXVtJMQh/+0OXDCAIUvumTPSNGLQueYAiEArJxr/7Xf/VcGYaYtMG9np7iX0cwrwq0oVnReVttkTS0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230816080418-bdf43f08-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":502802},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230816080418-bdf43f08-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/c9f176e16ca5a742aaf2ca49d36a8911/blocksuite-virgo-0.0.0-20230816080418-bdf43f08-nightly.tgz","_integrity":"sha512-ovVtkCC6CD3WEZLqqAiT9dEWxZLlwh3x4uHDKsAXacJxOhmJpmhCyjdK5Jsj8b1HWwtUww3ZjJ5GpRbgLRqNRg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230816080418-bdf43f08-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230816080418-bdf43f08-nightly_1692173298649_0.18075129825807323","host":"s3://npm-registry-packages"}},"0.0.0-20230816084758-3be96d22-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230816084758-3be96d22-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230816084758-3be96d22-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"1b5f2c2a87737f826f258c9525543f2de6850bfb","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230816084758-3be96d22-nightly.tgz","fileCount":167,"integrity":"sha512-tTTIOaEUetETbWgjLTzG8gZc5cTwe/v6wdm4KSJS9OFNX+n1bInBOXqd2RbYJlze0Yp1XZwd5LhIYbrM2YyVJw==","signatures":[{"sig":"MEQCIApBBJGc7KyyReUtmtfiOHYw8n3uYIf6/0ioA4Vc850GAiBypgVte9fFvvJ1ITWhoMYzHtM3wBTvYzKihWNVXJlpjw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230816084758-3be96d22-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":502802},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230816084758-3be96d22-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/46166e7e751820ae12f12f623a2f48aa/blocksuite-virgo-0.0.0-20230816084758-3be96d22-nightly.tgz","_integrity":"sha512-tTTIOaEUetETbWgjLTzG8gZc5cTwe/v6wdm4KSJS9OFNX+n1bInBOXqd2RbYJlze0Yp1XZwd5LhIYbrM2YyVJw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230816084758-3be96d22-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230816084758-3be96d22-nightly_1692175849382_0.770956467327955","host":"s3://npm-registry-packages"}},"0.0.0-20230816192550-eeb137dd-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230816192550-eeb137dd-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230816192550-eeb137dd-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"5fbbebb8e45ec21a48e3d3e274372fc9a81f2c79","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230816192550-eeb137dd-nightly.tgz","fileCount":167,"integrity":"sha512-v1OEGMtPOWMsjoEGDpBIjkymn4JTzCZPmhLDW3PKDnMjjSX1u60kHGDEAhCstt21j4OJOST890l/1GOLXBT60w==","signatures":[{"sig":"MEUCIFZclk6jGWdmVxak0hNGDPxhbQO8YOUWoraU+kZvhURDAiEAmomBB7kdyoMCnlFahBeR+Ugk5u4eJVpIp9HKPFtu68I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230816192550-eeb137dd-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":502802},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230816192550-eeb137dd-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/738b980b9dec32fd271ad2f96f7209bc/blocksuite-virgo-0.0.0-20230816192550-eeb137dd-nightly.tgz","_integrity":"sha512-v1OEGMtPOWMsjoEGDpBIjkymn4JTzCZPmhLDW3PKDnMjjSX1u60kHGDEAhCstt21j4OJOST890l/1GOLXBT60w==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230816192550-eeb137dd-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230816192550-eeb137dd-nightly_1692231759550_0.8432919867665822","host":"s3://npm-registry-packages"}},"0.0.0-20230817030423-20f3821a-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230817030423-20f3821a-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230817030423-20f3821a-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"d7c7adb7d424beee068d6f5c257d284840f92d1a","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230817030423-20f3821a-nightly.tgz","fileCount":167,"integrity":"sha512-DUQL3U1Rc9Jxz8iTa74GkPMiSUKdTbt9yPoIzpTnvhJE2W+IlRM0M04CzASzWL05vDJS8HK5mLnsBRg7bxhq8A==","signatures":[{"sig":"MEUCID4SU6tScSS/g6pb1+D1BYCtP8cxknMKIYQRuBQPAHIQAiEA0yjPrzh7Jgm9wx4C/P0C2p4aoSaROGcsl7WvigQOJjQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230817030423-20f3821a-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":502822},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230817030423-20f3821a-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/83797d669caaba6e54fa4d1e8cd1ff77/blocksuite-virgo-0.0.0-20230817030423-20f3821a-nightly.tgz","_integrity":"sha512-DUQL3U1Rc9Jxz8iTa74GkPMiSUKdTbt9yPoIzpTnvhJE2W+IlRM0M04CzASzWL05vDJS8HK5mLnsBRg7bxhq8A==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230817030423-20f3821a-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230817030423-20f3821a-nightly_1692241851002_0.09169396599442603","host":"s3://npm-registry-packages"}},"0.0.0-20230817172832-20c2b2a5-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230817172832-20c2b2a5-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230817172832-20c2b2a5-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"48aeea6bd5dcfc28a80de3bc7bb5847816ef2c3a","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230817172832-20c2b2a5-nightly.tgz","fileCount":167,"integrity":"sha512-oKnbZG4yYWfQO9Dvkt+ZvbNzyGiY2CTlEOd9jI8RFfWEKXnK121yynu0iD1Zfp96He/Nxt4jbwG8qG616ZtKRA==","signatures":[{"sig":"MEYCIQDvHoaspntYtZpg4iqCul0yf8WugTc/0ctXVLlpFmSZKgIhANs8p56+ARKo0OrDvkJHp6UFu5L1nJH+OAa90TQ5+hLe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230817172832-20c2b2a5-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":504138},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230817172832-20c2b2a5-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/954bb677c590a34abaf35731d4ca3215/blocksuite-virgo-0.0.0-20230817172832-20c2b2a5-nightly.tgz","_integrity":"sha512-oKnbZG4yYWfQO9Dvkt+ZvbNzyGiY2CTlEOd9jI8RFfWEKXnK121yynu0iD1Zfp96He/Nxt4jbwG8qG616ZtKRA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230817172832-20c2b2a5-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230817172832-20c2b2a5-nightly_1692294843055_0.945954885702049","host":"s3://npm-registry-packages"}},"0.0.0-20230817195259-240310af-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230817195259-240310af-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230817195259-240310af-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"dab0c10654ace67cd872a2f9f1e75203a4c7fcd1","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230817195259-240310af-nightly.tgz","fileCount":167,"integrity":"sha512-YYAHlKBbBOqHAXuCXdeSGseVpo/pEFy3WytzbTQPL6Vs5Vmm+iP0OE1DNHik28o0DFVOfWkSYCaWE5U0rSs9CA==","signatures":[{"sig":"MEQCICsIlwgb6eHslu+WPUAx7Pzt5sg4zkTlnuyq8PNVQzENAiA1iTQco/93/GxQxRnt7UjdR8YFpsOlmQSnRQNz/49jdA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230817195259-240310af-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":504138},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230817195259-240310af-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/ce9e7260dbe5544f56d9dc832ad000cb/blocksuite-virgo-0.0.0-20230817195259-240310af-nightly.tgz","_integrity":"sha512-YYAHlKBbBOqHAXuCXdeSGseVpo/pEFy3WytzbTQPL6Vs5Vmm+iP0OE1DNHik28o0DFVOfWkSYCaWE5U0rSs9CA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230817195259-240310af-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230817195259-240310af-nightly_1692318104431_0.14253299053344715","host":"s3://npm-registry-packages"}},"0.0.0-20230818013242-eb8ae5f4-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230818013242-eb8ae5f4-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230818013242-eb8ae5f4-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"481030eb83671165847fb497d933c3c2bcb12d43","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230818013242-eb8ae5f4-nightly.tgz","fileCount":167,"integrity":"sha512-A1SlzKoz4XJFGsXHjLK9ZpeCUt6c9OVWzmmHRlS7H+q2LfOBZV4vCuwk5vR0rzf5Hc7V3HORwkli8T3Ja2RgIA==","signatures":[{"sig":"MEYCIQD5cYt2Fn9HX0313jbAl0t4LQ54H45CUc2pIb9k+wA5iAIhAJetoDCS32gxyrUDaLxAvtWQSIEkc9S8E0VUlOOZKV86","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230818013242-eb8ae5f4-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":504138},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230818013242-eb8ae5f4-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/0667287a9aa705469b4a3d00de5786a6/blocksuite-virgo-0.0.0-20230818013242-eb8ae5f4-nightly.tgz","_integrity":"sha512-A1SlzKoz4XJFGsXHjLK9ZpeCUt6c9OVWzmmHRlS7H+q2LfOBZV4vCuwk5vR0rzf5Hc7V3HORwkli8T3Ja2RgIA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230818013242-eb8ae5f4-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230818013242-eb8ae5f4-nightly_1692323661174_0.7358738706368566","host":"s3://npm-registry-packages"}},"0.0.0-20230818021533-7e342436-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230818021533-7e342436-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230818021533-7e342436-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"1444ff9be8a30338b7d40686d8c8ee61aa46916e","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230818021533-7e342436-nightly.tgz","fileCount":167,"integrity":"sha512-iGGuxim+7o00OWq+K995KX/4xOa9PvivPVvR/mggzvXpLO/dXfJzbq2QiIzQfH62FfKNwpiHo0HAJ1sPU3mOcg==","signatures":[{"sig":"MEQCIFEMYVmZqkIXKHbkpjz1zQ1keSyg4HHS9MsVBVrWuv5eAiBDTyp/UwgACf/JAba2VmX1t7Pg3TwuJrRNTdrTMdKIng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230818021533-7e342436-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":504138},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230818021533-7e342436-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/cbe6ea70a81ce8555a470469451908b6/blocksuite-virgo-0.0.0-20230818021533-7e342436-nightly.tgz","_integrity":"sha512-iGGuxim+7o00OWq+K995KX/4xOa9PvivPVvR/mggzvXpLO/dXfJzbq2QiIzQfH62FfKNwpiHo0HAJ1sPU3mOcg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230818021533-7e342436-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230818021533-7e342436-nightly_1692325268767_0.9711891214484758","host":"s3://npm-registry-packages"}},"0.0.0-20230818051219-f0dac47e-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230818051219-f0dac47e-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230818051219-f0dac47e-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"ae797402b8cdc4356b20977702500b3ff126f92d","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230818051219-f0dac47e-nightly.tgz","fileCount":167,"integrity":"sha512-GhmfwXxLrR3xo5pjXJVvLF5nRtCr0D8AaUPuuQKp4R2HMqpSzQ90zcSgGCY/XPJrZUEWhEtg5un50zT+upsRNg==","signatures":[{"sig":"MEUCIFaa6il69VFnFn9YkjpAFHyLDFehW+Yckxy7+tL4DCrcAiEArvSWyGxyotk3eZiCIFRVUCDfql+GEsBDQkqcl+DPKsY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230818051219-f0dac47e-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":504138},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230818051219-f0dac47e-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/dab31d680cdc9e8d97e7eebeee19f4a3/blocksuite-virgo-0.0.0-20230818051219-f0dac47e-nightly.tgz","_integrity":"sha512-GhmfwXxLrR3xo5pjXJVvLF5nRtCr0D8AaUPuuQKp4R2HMqpSzQ90zcSgGCY/XPJrZUEWhEtg5un50zT+upsRNg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230818051219-f0dac47e-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230818051219-f0dac47e-nightly_1692336699609_0.07422218521088442","host":"s3://npm-registry-packages"}},"0.0.0-20230818053411-bc330b35-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230818053411-bc330b35-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230818053411-bc330b35-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"1309072c3a711f307b6434f83a1463a07c243f50","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230818053411-bc330b35-nightly.tgz","fileCount":167,"integrity":"sha512-jWExw6my5ff2LJRxXucVmKCoBSqKPxwPOtf9hi0bBvVyNcQnbj3nKrTKD+cOreodAOOVPaVN8Pni0KypfbTzDw==","signatures":[{"sig":"MEQCIAPgtkEK7SPWOxYdZ1ILtnXZHoIdw70am0XP/rNjt8VvAiBxFuUhX+ZHq+JhWmjZJHxksNZvVaMHSiPyrHnTmLcgWQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230818053411-bc330b35-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":504138},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230818053411-bc330b35-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/ad9d113d37cafb7e97d50c2ce1812837/blocksuite-virgo-0.0.0-20230818053411-bc330b35-nightly.tgz","_integrity":"sha512-jWExw6my5ff2LJRxXucVmKCoBSqKPxwPOtf9hi0bBvVyNcQnbj3nKrTKD+cOreodAOOVPaVN8Pni0KypfbTzDw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230818053411-bc330b35-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230818053411-bc330b35-nightly_1692337023463_0.4214515867689921","host":"s3://npm-registry-packages"}},"0.0.0-20230818163111-fc91dac8-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230818163111-fc91dac8-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230818163111-fc91dac8-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"6b008959fef69fa9186f45c8c2079cef2c878655","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230818163111-fc91dac8-nightly.tgz","fileCount":167,"integrity":"sha512-sbWO1yIqYoQEXM/g9V31KasbEEPY2RZ+6OFOxC0ms0cvRkykxSgOb6/EJQYrh7IE6jJhsDrjFjZclNxuTv1AeA==","signatures":[{"sig":"MEQCIGWfSA2zxd/VJgHRIr0Mk45AOIDTNRrrkL479ZEXh7w1AiBuHKN4VXNTNSrVkhhh+H6+RrdN0OtdU/2z8wu1NGgxyA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230818163111-fc91dac8-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":505334},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230818163111-fc91dac8-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/77d2573f0c751b2af95b6f94612b03a1/blocksuite-virgo-0.0.0-20230818163111-fc91dac8-nightly.tgz","_integrity":"sha512-sbWO1yIqYoQEXM/g9V31KasbEEPY2RZ+6OFOxC0ms0cvRkykxSgOb6/EJQYrh7IE6jJhsDrjFjZclNxuTv1AeA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230818163111-fc91dac8-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230818163111-fc91dac8-nightly_1692404466723_0.14873395126795863","host":"s3://npm-registry-packages"}},"0.0.0-20230819115528-2375022b-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230819115528-2375022b-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230819115528-2375022b-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"2e7f01f4cd0600e06631176a3d534a512806c2c9","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230819115528-2375022b-nightly.tgz","fileCount":167,"integrity":"sha512-6i3YHqVE0azY3gjT/q8Y1b7RZB80rPRLMZUlAexj//drwgd7GTD63HKk0vFyicja6HAxnPNV7ZZFGONehTHMUg==","signatures":[{"sig":"MEYCIQDfM23KK78AogVkV0jOdGw1GtG0AFrSMeEf69LIImGEjAIhANGRBnNFUXKKOw+Okk69etYUXdrQzAwWCRc3m/rDbX1P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230819115528-2375022b-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":505334},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230819115528-2375022b-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/daf03d2db1f27874242f55c3e241921c/blocksuite-virgo-0.0.0-20230819115528-2375022b-nightly.tgz","_integrity":"sha512-6i3YHqVE0azY3gjT/q8Y1b7RZB80rPRLMZUlAexj//drwgd7GTD63HKk0vFyicja6HAxnPNV7ZZFGONehTHMUg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230819115528-2375022b-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230819115528-2375022b-nightly_1692489984576_0.0839291447083248","host":"s3://npm-registry-packages"}},"0.0.0-20230820215847-d7777c6f-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230820215847-d7777c6f-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230820215847-d7777c6f-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"9cdca5623c928919bfb190ab3bce3841767db1ee","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230820215847-d7777c6f-nightly.tgz","fileCount":167,"integrity":"sha512-uhMjLTEYkZPJaoH1+jrzjd8Cyn5WbrjlWxT3n34ieVYxt+1KVYZ0A9FEHUYT27hdjNDI2qygvfzAANwucCd+gA==","signatures":[{"sig":"MEUCIQDX2uMm2bjn8wrinoCgpn+FmTVJoUXXEKGkbdDK9A2FRgIgMp7Y6j+7VKpgBImbzseqRJufn8whOWOey5MgerEY8II=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230820215847-d7777c6f-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":505334},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230820215847-d7777c6f-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/d90c9d532b370fca188f77fb0f513214/blocksuite-virgo-0.0.0-20230820215847-d7777c6f-nightly.tgz","_integrity":"sha512-uhMjLTEYkZPJaoH1+jrzjd8Cyn5WbrjlWxT3n34ieVYxt+1KVYZ0A9FEHUYT27hdjNDI2qygvfzAANwucCd+gA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230820215847-d7777c6f-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230820215847-d7777c6f-nightly_1692577337523_0.9498988130250572","host":"s3://npm-registry-packages"}},"0.0.0-20230821003714-6c9c5137-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230821003714-6c9c5137-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230821003714-6c9c5137-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"23498e2bba35ff0de8d1d05a9c977add8f300de9","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230821003714-6c9c5137-nightly.tgz","fileCount":167,"integrity":"sha512-KIYSA09if7s5E4h3CKOY5XNy8YB9ebz6htk2rBzSa+1Rs9pjnu08L8ZTe1oWuwV7HdMBqNCOJ3Fa7kcmddsGmg==","signatures":[{"sig":"MEUCIEe6HDYlrxViNS+ltgMsSJwFU63ZLvJ7ZwxbvUXjC7jFAiEAirSbgJSqFuj9NhOHsrFWozVwousbOnlfPXgLWU+sdIw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230821003714-6c9c5137-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":505334},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230821003714-6c9c5137-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/be165ed12c7fae0d6de90df63ea74cbd/blocksuite-virgo-0.0.0-20230821003714-6c9c5137-nightly.tgz","_integrity":"sha512-KIYSA09if7s5E4h3CKOY5XNy8YB9ebz6htk2rBzSa+1Rs9pjnu08L8ZTe1oWuwV7HdMBqNCOJ3Fa7kcmddsGmg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230821003714-6c9c5137-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230821003714-6c9c5137-nightly_1692578863134_0.5631295764890125","host":"s3://npm-registry-packages"}},"0.0.0-20230821045124-712e6c3d-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230821045124-712e6c3d-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230821045124-712e6c3d-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"e7ec204cad3961695c0f6d6be0c31cceba8a31e9","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230821045124-712e6c3d-nightly.tgz","fileCount":167,"integrity":"sha512-8XOOyRP2Y/QHnGICCv64dpRviHzY6jvEgrCjvK6+BVxAdBOTbviqfGty4NlEyC066BIr6ByrG2H9rRO7nvlQmA==","signatures":[{"sig":"MEQCIBVAdAsy6TnvsjR23otosXWCazUxVWwfA83gPM/x2N1nAiBfHJfGqw1lCy+JEhLVrIJ9k76GtN4JJew+wz+1RxxI5Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230821045124-712e6c3d-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":505334},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230821045124-712e6c3d-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/656582ee2751303b33a47415005f32a8/blocksuite-virgo-0.0.0-20230821045124-712e6c3d-nightly.tgz","_integrity":"sha512-8XOOyRP2Y/QHnGICCv64dpRviHzY6jvEgrCjvK6+BVxAdBOTbviqfGty4NlEyC066BIr6ByrG2H9rRO7nvlQmA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230821045124-712e6c3d-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230821045124-712e6c3d-nightly_1692594390810_0.3494105425813263","host":"s3://npm-registry-packages"}},"0.0.0-20230821151132-2bd0c7f6-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230821151132-2bd0c7f6-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230821151132-2bd0c7f6-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"1c79f0d6ada24f12116e3fc949474651c9309f0b","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230821151132-2bd0c7f6-nightly.tgz","fileCount":167,"integrity":"sha512-h+mPcD5BfdlqKBmX3bEUaX91qte/O3Uk4+2lmvqT0ZaBx3YUavQ2b8SPirJbFoPbPzYX5x9t9SjRRlbdPPBjEQ==","signatures":[{"sig":"MEUCIBBl7lWFpc3RVkncDSGtSkDYF1DgzeCq6S9wePDNKkgjAiEArSlDf/9VZ86G4374LeB8hutL2kSJg3QRmlSE6zEI98I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230821151132-2bd0c7f6-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":505334},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230821151132-2bd0c7f6-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/d4b42594ce3fad4cd3f4c74468598571/blocksuite-virgo-0.0.0-20230821151132-2bd0c7f6-nightly.tgz","_integrity":"sha512-h+mPcD5BfdlqKBmX3bEUaX91qte/O3Uk4+2lmvqT0ZaBx3YUavQ2b8SPirJbFoPbPzYX5x9t9SjRRlbdPPBjEQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230821151132-2bd0c7f6-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230821151132-2bd0c7f6-nightly_1692661211419_0.5854444454772101","host":"s3://npm-registry-packages"}},"0.0.0-20230822202122-dba33658-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230822202122-dba33658-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230822202122-dba33658-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"c074fb54d62844b1047e64dc302fe4a69752a48d","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230822202122-dba33658-nightly.tgz","fileCount":172,"integrity":"sha512-QIZUtlXzXbhHN35DPlkCut9NxL7nLMmFsBvTqtDzFo6SELWg3U7SDCf8LuO6AgFccJIDejJ0QXrKcyqHY9jrNQ==","signatures":[{"sig":"MEUCIGE8KjgiHTtRIVA7Mwx+ZsxtT8jbQdyR/LotQKjJQZhUAiEA4aE3lCmmtomHBwjZVk693tRau4dXUJfGnwgk9IsodSY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230822202122-dba33658-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":518207},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230822202122-dba33658-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/23d4ba833796bf4513c4d4ea05330401/blocksuite-virgo-0.0.0-20230822202122-dba33658-nightly.tgz","_integrity":"sha512-QIZUtlXzXbhHN35DPlkCut9NxL7nLMmFsBvTqtDzFo6SELWg3U7SDCf8LuO6AgFccJIDejJ0QXrKcyqHY9jrNQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230822202122-dba33658-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230822202122-dba33658-nightly_1692735824787_0.12047993361620968","host":"s3://npm-registry-packages"}},"0.0.0-20230822213853-1f5515ca-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230822213853-1f5515ca-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230822213853-1f5515ca-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"468466ba8ce8d75d6b83eca0a6443e799746258d","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230822213853-1f5515ca-nightly.tgz","fileCount":172,"integrity":"sha512-U6ytE7cITWlW+pbYpunfvRWgOviUk9Pv19+vrCvvEEUAXPlTQ+mJyTLPQw2ljCnvVW0qU+WA+WDQB0Y27c9svw==","signatures":[{"sig":"MEUCIDexEYnbcCmkedIRMewvmnB8a0+J7dDOcbT1ofaWukM9AiEAsSGQEwiD/8Q77ffwVcMzU/96o43lb1huqPguzdZfRZE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230822213853-1f5515ca-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":518207},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230822213853-1f5515ca-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/ae5c4f453f40a00c9daa80427ab1fd0b/blocksuite-virgo-0.0.0-20230822213853-1f5515ca-nightly.tgz","_integrity":"sha512-U6ytE7cITWlW+pbYpunfvRWgOviUk9Pv19+vrCvvEEUAXPlTQ+mJyTLPQw2ljCnvVW0qU+WA+WDQB0Y27c9svw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230822213853-1f5515ca-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230822213853-1f5515ca-nightly_1692740491218_0.8979883625778267","host":"s3://npm-registry-packages"}},"0.0.0-20230822230555-98129627-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230822230555-98129627-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230822230555-98129627-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"b8d06d769bead62ead89188a3fd93ce20c108633","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230822230555-98129627-nightly.tgz","fileCount":172,"integrity":"sha512-6JsZ2q2bS6cz1IkdBJS9b/icwVHNorPVs8XitJI79n8+T1GQ/wbudQLq4vq7mau0fOdgAR6aq0MtaXxlGEOvAw==","signatures":[{"sig":"MEUCICyFPd98+WR3eCzQL5mgP5SNFToJffyvCUp0fu9LiVJqAiEAr5ztAHx/9yVTzcgXwQX0m/gIMju8JrM/vx0DfmVYCog=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230822230555-98129627-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":518207},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230822230555-98129627-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/5d53f5e0b6be74b8ebe188278bae51cc/blocksuite-virgo-0.0.0-20230822230555-98129627-nightly.tgz","_integrity":"sha512-6JsZ2q2bS6cz1IkdBJS9b/icwVHNorPVs8XitJI79n8+T1GQ/wbudQLq4vq7mau0fOdgAR6aq0MtaXxlGEOvAw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230822230555-98129627-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230822230555-98129627-nightly_1692745715908_0.9434796847698328","host":"s3://npm-registry-packages"}},"0.0.0-20230823134503-134d8f1a-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230823134503-134d8f1a-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230823134503-134d8f1a-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"b9b0e1a08f5f8c94a91de4d569f14c9d5fdd520f","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230823134503-134d8f1a-nightly.tgz","fileCount":172,"integrity":"sha512-pIUpzWK8YNYWbmAqfN0ai3Wlh2892TuhNsj4kW9rDET6JXCCnRt9R9tRDkQUL/6xlmPofhIWMKULWc18gUrdGw==","signatures":[{"sig":"MEUCIAw2cE22cdnfzlc8YpV1k6kcL/6ixDfO+EeKVbxQlo6RAiEAzhdO+Lxr3SSS6M4grzodrcd5C/vX97EfZ2+4Aw5wvIQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230823134503-134d8f1a-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":518207},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230823134503-134d8f1a-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/68ac3a2e9d919daf7ced63f0913c5b12/blocksuite-virgo-0.0.0-20230823134503-134d8f1a-nightly.tgz","_integrity":"sha512-pIUpzWK8YNYWbmAqfN0ai3Wlh2892TuhNsj4kW9rDET6JXCCnRt9R9tRDkQUL/6xlmPofhIWMKULWc18gUrdGw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230823134503-134d8f1a-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230823134503-134d8f1a-nightly_1692802298541_0.45408506152045414","host":"s3://npm-registry-packages"}},"0.0.0-20230823174824-5ef71be9-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230823174824-5ef71be9-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230823174824-5ef71be9-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"fada53d2b2d0c4e8a93c1051baeae1fc5a56be7d","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230823174824-5ef71be9-nightly.tgz","fileCount":172,"integrity":"sha512-j0+PIFgjBsj1fOlVl3G1458V960yLGFarFU/QdZONW+D0Jx8apqgEzN9A1Ey+Zwuft/eOaAve0z9H/GhwCGB2Q==","signatures":[{"sig":"MEUCIHUf1fvY3jzDUFx9QkK+uT+yfsN9E3xBuHBWoxM0NzdAAiEA5ovp25EGhCFTVFqG4qIvBG8VTUioD/yalOddWdJURtY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230823174824-5ef71be9-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":518207},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230823174824-5ef71be9-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/42065ef5cfe2108b6a300f5a98fd0a22/blocksuite-virgo-0.0.0-20230823174824-5ef71be9-nightly.tgz","_integrity":"sha512-j0+PIFgjBsj1fOlVl3G1458V960yLGFarFU/QdZONW+D0Jx8apqgEzN9A1Ey+Zwuft/eOaAve0z9H/GhwCGB2Q==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230823174824-5ef71be9-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230823174824-5ef71be9-nightly_1692836510602_0.6311488374174852","host":"s3://npm-registry-packages"}},"0.0.0-20230824020044-afa5db2e-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230824020044-afa5db2e-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230824020044-afa5db2e-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"3c6a50626f7d8b9e1743352817f32863226ac38e","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230824020044-afa5db2e-nightly.tgz","fileCount":172,"integrity":"sha512-mo6K39e3qoKxo8YGbFIvB/X+0iLucOder4hnFzeo5DD+v5ub2nkSx6JLzr4E0R68RacjyRkSH03jGqUQd1Xq+w==","signatures":[{"sig":"MEYCIQDrpI5+xFlgblkwtJd+2NFZxCWbNz7GjVE9gRU1pcxYtAIhAOisTNo67WuNDY81iZBYsPa/ym3z+n5OUNPgr7X1H8Xp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230824020044-afa5db2e-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":518207},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230824020044-afa5db2e-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/0cc182a1a25a5f0fb70659dad6ea07fb/blocksuite-virgo-0.0.0-20230824020044-afa5db2e-nightly.tgz","_integrity":"sha512-mo6K39e3qoKxo8YGbFIvB/X+0iLucOder4hnFzeo5DD+v5ub2nkSx6JLzr4E0R68RacjyRkSH03jGqUQd1Xq+w==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230824020044-afa5db2e-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230824020044-afa5db2e-nightly_1692843445235_0.9530859802698435","host":"s3://npm-registry-packages"}},"0.0.0-20230824081236-b25a3da9-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230824081236-b25a3da9-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230824081236-b25a3da9-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"a7f62ee5ad004b913b54ad7be2468e196cbde074","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230824081236-b25a3da9-nightly.tgz","fileCount":172,"integrity":"sha512-+1ddyvex/Nst7x2K8lhSprFMhGmBUQclZsRtVZ1tES4eLHn37beBAGzAFe/vjMAemzKdeEjAlscAAkl4dYDCeg==","signatures":[{"sig":"MEQCIFgguT4pIvtiUGnfEDRU7AIW4zJTe1/Vun0Rabwq3DR3AiB+tfBmiftqtetOLK/49TWfXm6oGRGbluoo4FSPzPSNNQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230824081236-b25a3da9-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":518207},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230824081236-b25a3da9-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/080bb6a4af4c6aae965d4fe6594fa562/blocksuite-virgo-0.0.0-20230824081236-b25a3da9-nightly.tgz","_integrity":"sha512-+1ddyvex/Nst7x2K8lhSprFMhGmBUQclZsRtVZ1tES4eLHn37beBAGzAFe/vjMAemzKdeEjAlscAAkl4dYDCeg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230824081236-b25a3da9-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230824081236-b25a3da9-nightly_1692864926942_0.5364699785549611","host":"s3://npm-registry-packages"}},"0.0.0-20230824205952-3df3727b-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230824205952-3df3727b-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230824205952-3df3727b-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"6c667296ed1ab6bbb60dcf07a56ca4d72593cca7","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230824205952-3df3727b-nightly.tgz","fileCount":172,"integrity":"sha512-FIsKiWeT2M4uZtZ1lHrilLIqrFqtePHHlzk+ZjynXWn2IPXI6iZAPAzg6M+OxYNQKNXHhvRS/yqefK3ZU8vPqg==","signatures":[{"sig":"MEQCIDCbZDc6zQmL/5WPtR11VjMnDGGBQcSoaYl2ZcODg703AiBHMWEHuw18+fF0JZZcYRIL5P6swwczVgXEi+scbxpEJQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230824205952-3df3727b-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":518207},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230824205952-3df3727b-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/806702fc6af49295c360fdec307268d8/blocksuite-virgo-0.0.0-20230824205952-3df3727b-nightly.tgz","_integrity":"sha512-FIsKiWeT2M4uZtZ1lHrilLIqrFqtePHHlzk+ZjynXWn2IPXI6iZAPAzg6M+OxYNQKNXHhvRS/yqefK3ZU8vPqg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230824205952-3df3727b-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230824205952-3df3727b-nightly_1692922939925_0.6596056653203322","host":"s3://npm-registry-packages"}},"0.0.0-20230825040110-4373a05b-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230825040110-4373a05b-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230825040110-4373a05b-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"a23d903ca67df2787a5429c6fea05b319705a4a6","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230825040110-4373a05b-nightly.tgz","fileCount":172,"integrity":"sha512-bTFJ2poH99UeTEbG0ijRSwlSUTQIvonvFYDXqoB9CXghUbUNEJ7/kbkL0XT76/0S+lZEGbwsOtaivwrD8pf/Qw==","signatures":[{"sig":"MEUCIFy/HmJKojy+ub3WVee4+TPNPbowtKeZVliD6Gsoc3e6AiEAg3WvN2lX4lCbxXUYEDaY/D3Cqg/9P1EN/rTDyfGFlIk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230825040110-4373a05b-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":518207},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230825040110-4373a05b-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/90b17fda3dd7c86fd31e798f691f2303/blocksuite-virgo-0.0.0-20230825040110-4373a05b-nightly.tgz","_integrity":"sha512-bTFJ2poH99UeTEbG0ijRSwlSUTQIvonvFYDXqoB9CXghUbUNEJ7/kbkL0XT76/0S+lZEGbwsOtaivwrD8pf/Qw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230825040110-4373a05b-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230825040110-4373a05b-nightly_1692936286982_0.12866628332661123","host":"s3://npm-registry-packages"}},"0.0.0-20230825054009-a12544d6-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230825054009-a12544d6-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230825054009-a12544d6-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"54c0d303c4853bf3048ef8bb5c19c7732a970d64","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230825054009-a12544d6-nightly.tgz","fileCount":172,"integrity":"sha512-cN8FJsZwLhna26eNUTTDQhVvsVCHBLZZvlP66xs6GI3HI3W7laRSJmNQJ4IXlPwC+8dWPEjT1mjDcQecfagtAA==","signatures":[{"sig":"MEYCIQC3ojd8NqZnhWi7ruDIrkzZhMNf5L7Slzqn7PzXQnViIAIhALlcb4+bjXY41Lry5cqERfa7YwZJ3uxtgKqD7oD+VVK2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230825054009-a12544d6-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":518207},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230825054009-a12544d6-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/6475015f52c9533153d9ede0ad120e61/blocksuite-virgo-0.0.0-20230825054009-a12544d6-nightly.tgz","_integrity":"sha512-cN8FJsZwLhna26eNUTTDQhVvsVCHBLZZvlP66xs6GI3HI3W7laRSJmNQJ4IXlPwC+8dWPEjT1mjDcQecfagtAA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230825054009-a12544d6-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230825054009-a12544d6-nightly_1692942541484_0.4806735482000044","host":"s3://npm-registry-packages"}},"0.0.0-20230825222505-f2870064-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230825222505-f2870064-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230825222505-f2870064-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"b6db5b3737889e3d3e48affcefbf903e889bf274","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230825222505-f2870064-nightly.tgz","fileCount":172,"integrity":"sha512-pn6+nxto6D/UQtqPXPYfLnHn90uEF2pc8uvuc6ym1rZPmHwl4QL5eeumv5oq8PpTIti2ZuZsXMukll/sX4DAgg==","signatures":[{"sig":"MEQCIG2jlHN7hVUK2EgRU6xx6tudT1Q4BW2PfOMCqBIsm8vDAiAV1XjnlW0QYfjcQ7jAqAmEg9av3kh+EhNtnrxD5xJMyg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230825222505-f2870064-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":519647},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230825222505-f2870064-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/8a592e9b6f222a10fa8cb87c10307493/blocksuite-virgo-0.0.0-20230825222505-f2870064-nightly.tgz","_integrity":"sha512-pn6+nxto6D/UQtqPXPYfLnHn90uEF2pc8uvuc6ym1rZPmHwl4QL5eeumv5oq8PpTIti2ZuZsXMukll/sX4DAgg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230825222505-f2870064-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230825222505-f2870064-nightly_1693009267710_0.0880142239495878","host":"s3://npm-registry-packages"}},"0.0.0-20230826154851-89531566-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230826154851-89531566-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230826154851-89531566-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"e4904cec5bc8a6b5861fe85aeb9ae293dedeba51","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230826154851-89531566-nightly.tgz","fileCount":172,"integrity":"sha512-VMRANF2yEKdu6pLLj+3qAg/dCDA+hV1wZjP8J6l6Mee9m1m0rNoQZw4zwhThPRcgB//aHiqiMypNbblzDv6K2w==","signatures":[{"sig":"MEYCIQC2jGn3sGH/AVfcP8kphz9j90JIksOdfFnqjM3CyyejnwIhAO42xoy4NNafAxSO+3FiNqM1vwgyninOiodzP0mNfhek","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230826154851-89531566-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":519647},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230826154851-89531566-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/34e78e012f50fc69854b879350f3d506/blocksuite-virgo-0.0.0-20230826154851-89531566-nightly.tgz","_integrity":"sha512-VMRANF2yEKdu6pLLj+3qAg/dCDA+hV1wZjP8J6l6Mee9m1m0rNoQZw4zwhThPRcgB//aHiqiMypNbblzDv6K2w==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.21.4","@blocksuite/global":"0.0.0-20230826154851-89531566-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.7.6","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230826154851-89531566-nightly_1693095837398_0.3589919955743104","host":"s3://npm-registry-packages"}},"0.0.0-20230827224823-81f8728e-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230827224823-81f8728e-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230827224823-81f8728e-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"075cece1c98070f8b561419a88ca0fafb5e53607","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230827224823-81f8728e-nightly.tgz","fileCount":172,"integrity":"sha512-G9W6UE2FDuHhkQx5wJGrAsnadi+a5kNSHwsfVd0C70htscm60MrAobKaJ3Z+XBJGKUbChOt4tJhxcu+KtiFtUA==","signatures":[{"sig":"MEYCIQDZmd3GxxqjJ/v1a8OatG0LWFPcgEFJXMMbN6Y4+z5QwQIhAOZqn65bc5ZQkjMmmdrdgVcrph0994PZ1c53qMKTmgz2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230827224823-81f8728e-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":521663},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230827224823-81f8728e-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/dba67214bcabdc248ee4608ec69f1434/blocksuite-virgo-0.0.0-20230827224823-81f8728e-nightly.tgz","_integrity":"sha512-G9W6UE2FDuHhkQx5wJGrAsnadi+a5kNSHwsfVd0C70htscm60MrAobKaJ3Z+XBJGKUbChOt4tJhxcu+KtiFtUA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230827224823-81f8728e-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230827224823-81f8728e-nightly_1693182179813_0.5691891093139358","host":"s3://npm-registry-packages"}},"0.0.0-20230828163942-e5356e86-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230828163942-e5356e86-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230828163942-e5356e86-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"8173c8fd7bf63ef1bb459b5f54257d97a8bd7e57","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230828163942-e5356e86-nightly.tgz","fileCount":177,"integrity":"sha512-CO0RRe/aFZhhSCT3avJtW9G10lweVHpSSMLwY7/g8oKYruTRaAMtNDuQgtEDPbCbGm8NFtB+YE2vGcCmrklUqw==","signatures":[{"sig":"MEUCIQDUAyrtNFVw5C/oDuuHeTM8bCkvHzBBh3x/E9g9fwLIfwIgFRKQeUakgWTf/HqBsIdVnxHAHdeJ66CN4zCH9D/yL1Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230828163942-e5356e86-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":519874},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230828163942-e5356e86-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/6f374beb84875211d2d09a66e946e06a/blocksuite-virgo-0.0.0-20230828163942-e5356e86-nightly.tgz","_integrity":"sha512-CO0RRe/aFZhhSCT3avJtW9G10lweVHpSSMLwY7/g8oKYruTRaAMtNDuQgtEDPbCbGm8NFtB+YE2vGcCmrklUqw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230828163942-e5356e86-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230828163942-e5356e86-nightly_1693268603896_0.8699817095260409","host":"s3://npm-registry-packages"}},"0.8.0":{"name":"@blocksuite/virgo","version":"0.8.0","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.8.0","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"9a37062b332e4bd7034c6235df572779ac45971f","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.8.0.tgz","fileCount":177,"integrity":"sha512-/17iXgvqAYCiwjJKTQPRMQgsjLSp3AM2O0otx0mexjN4fhgDb0nB2JYhqo6XgUBrZctgPUK7hHBbeWHz2zot+w==","signatures":[{"sig":"MEQCIETPxHUrY2H2YcH+aQZFdAvuxt0qVAc3/XHPtm43ev32AiB5Ia5mHXndbtnR3BoSOo399aUAE45UqJg07lCwAjlN0g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.8.0","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":518799},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.8.0.tgz","types":"dist/index.d.ts","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/8b7f3619bca0c522b66ce3d2f34fca74/blocksuite-virgo-0.8.0.tgz","_integrity":"sha512-/17iXgvqAYCiwjJKTQPRMQgsjLSp3AM2O0otx0mexjN4fhgDb0nB2JYhqo6XgUBrZctgPUK7hHBbeWHz2zot+w==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.8.0_1693321374858_0.6065468781025045","host":"s3://npm-registry-packages"}},"0.0.0-20230829150056-df43987c-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230829150056-df43987c-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230829150056-df43987c-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"c79d3163ef2741c7cf68ecff0be459e64793baab","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230829150056-df43987c-nightly.tgz","fileCount":177,"integrity":"sha512-HxqF0LuT7678Q+GI8rEwvLYrOD6mpgeNJ6PLFnKMmg4BF6CLxK+acYpX36kNZbGCW68twegebJK5c9ETajb6DQ==","signatures":[{"sig":"MEUCIF63kj4/sBMj3U0TIIEwFt52Pj4gAFDettIl6PH0xG0RAiEA3rmxNYwaslLYbwv4Blb2zSoBGQwmNlgZuTDVB2t5c/4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230829150056-df43987c-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":518863},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230829150056-df43987c-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/5c6fe4573dace9b8e44cff1933abbed3/blocksuite-virgo-0.0.0-20230829150056-df43987c-nightly.tgz","_integrity":"sha512-HxqF0LuT7678Q+GI8rEwvLYrOD6mpgeNJ6PLFnKMmg4BF6CLxK+acYpX36kNZbGCW68twegebJK5c9ETajb6DQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230829150056-df43987c-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230829150056-df43987c-nightly_1693354956415_0.3180934400472657","host":"s3://npm-registry-packages"}},"0.0.0-20230830111255-92eab248-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230830111255-92eab248-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230830111255-92eab248-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"0936f1a29e80d6a509cd12cebb6f153e04871870","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230830111255-92eab248-nightly.tgz","fileCount":177,"integrity":"sha512-lGYTQB+drVdWPlCNW0ygHurGmP3n/YtQQyMwR25A8OAkhKm0XQl97utYYIgQBH4hmzwscoJu70o9IuKqgGRyJQ==","signatures":[{"sig":"MEUCIAJr18OS30pR/0k55oDL7VCxmU2oOkbjK/bvnAK6UGHgAiEAnHWaCAXhajsTN5DjSZYYMID9s3iEYv91dAlPLktKlN8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230830111255-92eab248-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":517555},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230830111255-92eab248-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/e060ffb3c9fd046b0f98092da9360097/blocksuite-virgo-0.0.0-20230830111255-92eab248-nightly.tgz","_integrity":"sha512-lGYTQB+drVdWPlCNW0ygHurGmP3n/YtQQyMwR25A8OAkhKm0XQl97utYYIgQBH4hmzwscoJu70o9IuKqgGRyJQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230830111255-92eab248-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230830111255-92eab248-nightly_1693411196824_0.45552118594712154","host":"s3://npm-registry-packages"}},"0.0.0-20230831171019-9141eea8-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230831171019-9141eea8-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230831171019-9141eea8-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"61dd8578a8f299eb4bd3fd5a2c26f2e760e067b3","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230831171019-9141eea8-nightly.tgz","fileCount":177,"integrity":"sha512-NNHVSh8JjYLp+41zys3FCNA3Sx077DNjs+BKbEo5/FENKXBqbiObyDOgEfIptsp0xCDZr277t+7dKyUWeNj8Kw==","signatures":[{"sig":"MEYCIQCNGEsyGjfqJetBOMSPcEgWU/211ZCYCbYQGHgVcxBoagIhAIAKVo0znGnnzw58aUZJjVBqNF4k87mEPxY02a6lu/H7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230831171019-9141eea8-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":517984},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230831171019-9141eea8-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/572a3d721133b7d5ed757039a777624d/blocksuite-virgo-0.0.0-20230831171019-9141eea8-nightly.tgz","_integrity":"sha512-NNHVSh8JjYLp+41zys3FCNA3Sx077DNjs+BKbEo5/FENKXBqbiObyDOgEfIptsp0xCDZr277t+7dKyUWeNj8Kw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230831171019-9141eea8-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230831171019-9141eea8-nightly_1693505260335_0.018450104986959204","host":"s3://npm-registry-packages"}},"0.0.0-20230901043529-5c749cf6-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230901043529-5c749cf6-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230901043529-5c749cf6-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"f5fc84659e8390a8df955eed2ac9ac0f920457b7","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230901043529-5c749cf6-nightly.tgz","fileCount":177,"integrity":"sha512-9CxAw1njMgl9KkuX48PrW0B4jmmPk+peBBlp8uxIMTaXNDEzoJn/l1oFqhFToRurZ/4Kv3KaDDHgPBVnkFq+bA==","signatures":[{"sig":"MEUCIQCruRFef6tL9TmT9a0vmlnwb4aa7EYS7DJXBH33Rp7WEQIgIXchLxO9GgpocopuOa5QTsmAG2TLSY5j4arYDTk6/ao=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230901043529-5c749cf6-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":517984},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230901043529-5c749cf6-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/c0a462b1442b9a275505279490146e97/blocksuite-virgo-0.0.0-20230901043529-5c749cf6-nightly.tgz","_integrity":"sha512-9CxAw1njMgl9KkuX48PrW0B4jmmPk+peBBlp8uxIMTaXNDEzoJn/l1oFqhFToRurZ/4Kv3KaDDHgPBVnkFq+bA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230901043529-5c749cf6-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230901043529-5c749cf6-nightly_1693543152496_0.41257160943702176","host":"s3://npm-registry-packages"}},"0.0.0-20230901235404-5365e5eb-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230901235404-5365e5eb-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230901235404-5365e5eb-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"4af7643882d62298eac19170581516429837e431","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230901235404-5365e5eb-nightly.tgz","fileCount":177,"integrity":"sha512-d1eKwcrcW7yIF+LJUWOeDIjLUMe/5PzpyZACKdwJL6z2bQqoFjCeU6xMBki3/mTB8lMvhi4TBO1ShCd9+aPXBQ==","signatures":[{"sig":"MEYCIQDcGju1Lt4w/PDZqAilI9nApxumkz0JcOOr9vC1yFO8xQIhAIRytAHDE4GZi6H13H8XDMWiVPphoqS2e3/UwDw/YzeU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230901235404-5365e5eb-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":517984},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230901235404-5365e5eb-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/a6c9ac7cd8dc1d22416529bf3f58bcb2/blocksuite-virgo-0.0.0-20230901235404-5365e5eb-nightly.tgz","_integrity":"sha512-d1eKwcrcW7yIF+LJUWOeDIjLUMe/5PzpyZACKdwJL6z2bQqoFjCeU6xMBki3/mTB8lMvhi4TBO1ShCd9+aPXBQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230901235404-5365e5eb-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230901235404-5365e5eb-nightly_1693614117206_0.7306479561477202","host":"s3://npm-registry-packages"}},"0.0.0-20230902132629-a4a41d59-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230902132629-a4a41d59-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230902132629-a4a41d59-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"55a3c916229e50ec94a9260ab3062d9f9d5d9e98","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230902132629-a4a41d59-nightly.tgz","fileCount":177,"integrity":"sha512-Py6DRE3L+pibYqLtOnNILIxeiE1mwmCdfgiJmVeteQhkCz8ph62lpZGFvLDs23E9pVlsxl6tlOnwGhM4iQ2c4Q==","signatures":[{"sig":"MEUCIQCFC/YHrjW7tGJmnA4NPlN4v3r5/QZcr3dLvMHy1DvRJAIgeEsQLSTxDS0VhGlKElgjTGPAplhi/+TW12EQCtQB9Kk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230902132629-a4a41d59-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":519019},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230902132629-a4a41d59-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/9983a69e9eef3ca6bac659b0a5e854b7/blocksuite-virgo-0.0.0-20230902132629-a4a41d59-nightly.tgz","_integrity":"sha512-Py6DRE3L+pibYqLtOnNILIxeiE1mwmCdfgiJmVeteQhkCz8ph62lpZGFvLDs23E9pVlsxl6tlOnwGhM4iQ2c4Q==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230902132629-a4a41d59-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230902132629-a4a41d59-nightly_1693700633780_0.9996191460382706","host":"s3://npm-registry-packages"}},"0.0.0-20230903053104-ef722e5c-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230903053104-ef722e5c-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230903053104-ef722e5c-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"915ca0f4eb6f621fcc1ba8e4b5d770d9824ee5d0","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230903053104-ef722e5c-nightly.tgz","fileCount":177,"integrity":"sha512-i4nzuMZEawIKMkJHybKZTnANFpBUj8zlGncXPb9TgZzzJua8wgS4Q7SEppGLcaNJnNHP8GJ5bV5UE2geyED81Q==","signatures":[{"sig":"MEQCICuvpxfPcbIg5UjY87dewaJkeoPc9dYmVGr5WvvZ4urPAiAM8lz8SCjwR+KOs33mpASkExUmBxFU+LGUcG5/bCDTeg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230903053104-ef722e5c-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":519019},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230903053104-ef722e5c-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/f0b71af69a68fd151056e363c0b1624a/blocksuite-virgo-0.0.0-20230903053104-ef722e5c-nightly.tgz","_integrity":"sha512-i4nzuMZEawIKMkJHybKZTnANFpBUj8zlGncXPb9TgZzzJua8wgS4Q7SEppGLcaNJnNHP8GJ5bV5UE2geyED81Q==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230903053104-ef722e5c-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230903053104-ef722e5c-nightly_1693786981579_0.3780541800365098","host":"s3://npm-registry-packages"}},"0.0.0-20230904210824-82bf80a4-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230904210824-82bf80a4-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230904210824-82bf80a4-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"6a5ea11cd8dd34d8a5920973c8418547e5c83d27","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230904210824-82bf80a4-nightly.tgz","fileCount":177,"integrity":"sha512-7PYe3rK0UVCWMSccUQBG2gQftRfQ3LKhO99MLTXYyKPJ3f9jVv8hiMeq881JyE2MM/8vPf/PfsQyskZI1PaUpA==","signatures":[{"sig":"MEYCIQC5cQEtdeSgrHjFde7RBBvHvWhp86WgR9VwYqVfUiVEGgIhAMVjlNrEq9fj1qwrW7/FACqi8bsanlctitqGYlmKhAxj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230904210824-82bf80a4-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":519019},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230904210824-82bf80a4-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/ff243a8799a50eebbda2467131afb0b4/blocksuite-virgo-0.0.0-20230904210824-82bf80a4-nightly.tgz","_integrity":"sha512-7PYe3rK0UVCWMSccUQBG2gQftRfQ3LKhO99MLTXYyKPJ3f9jVv8hiMeq881JyE2MM/8vPf/PfsQyskZI1PaUpA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230904210824-82bf80a4-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230904210824-82bf80a4-nightly_1693873327451_0.9521767919823814","host":"s3://npm-registry-packages"}},"0.0.0-20230905170607-94acf22c-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230905170607-94acf22c-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230905170607-94acf22c-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"887daa84a0e5b4d9009757d479bf9e3a3f724dd3","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230905170607-94acf22c-nightly.tgz","fileCount":177,"integrity":"sha512-ctzphYfKzmtMQnlQyPRgVw5bt9TK0HCO5wFYSIHfvyEq3OUr6f1EX9qov3QZVyoF5YzWh938XPwM5exgkJ/J1g==","signatures":[{"sig":"MEQCIAfQwNqZIrbJ8A+NTeOqp37vNYJV7nCLk9YtqZD3PHWGAiB5nc843fNyxDpfLK7U0DXY0a0aU9sIEUZVibEBksXlJQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230905170607-94acf22c-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":518152},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230905170607-94acf22c-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/4a6f48bdc9b61382c313704731a664b4/blocksuite-virgo-0.0.0-20230905170607-94acf22c-nightly.tgz","_integrity":"sha512-ctzphYfKzmtMQnlQyPRgVw5bt9TK0HCO5wFYSIHfvyEq3OUr6f1EX9qov3QZVyoF5YzWh938XPwM5exgkJ/J1g==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230905170607-94acf22c-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230905170607-94acf22c-nightly_1693959750166_0.4641343875548598","host":"s3://npm-registry-packages"}},"0.0.0-20230906133203-d3774c2c-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230906133203-d3774c2c-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230906133203-d3774c2c-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"87470ba5c10822899704ef47baa331bcd6b8dba0","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230906133203-d3774c2c-nightly.tgz","fileCount":177,"integrity":"sha512-l9CVEyFvcqxvmMlUCHVjEwrNTgyGYP72z7A7vpxGa/PXC+3p6FETh9m+ABzsljJdIvLjlvabVQw2i5W2KXdgpQ==","signatures":[{"sig":"MEUCIQCKk9Mih/IrokxO5/Hkb5lm71eneNlxT/G9SE6Ve5wGrgIgCKCKvGLaD0boE/v8Y2q5oF5bnuzHMZg2WF9cTsqoYEs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230906133203-d3774c2c-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":518152},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230906133203-d3774c2c-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/6745d505e0a1f93f006722f88fa0412a/blocksuite-virgo-0.0.0-20230906133203-d3774c2c-nightly.tgz","_integrity":"sha512-l9CVEyFvcqxvmMlUCHVjEwrNTgyGYP72z7A7vpxGa/PXC+3p6FETh9m+ABzsljJdIvLjlvabVQw2i5W2KXdgpQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230906133203-d3774c2c-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230906133203-d3774c2c-nightly_1694046128518_0.3107654397669879","host":"s3://npm-registry-packages"}},"0.0.0-20230907104636-f5488de4-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230907104636-f5488de4-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230907104636-f5488de4-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"ce012a58337589029fbaca76c0c48a9cd7cad216","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230907104636-f5488de4-nightly.tgz","fileCount":177,"integrity":"sha512-H+aR9JVQbGjsMYoq7Rfz8mtDznsFa9I5cfBkCXDi2ITBPKESkoHb6tlTtHp5OGZPH0tX8qUu0OcVx7oXJLeUwQ==","signatures":[{"sig":"MEUCIQDyeBVZiS5wvaAsgr2BoQi6l2TGnY+Xt5oMmoVZvVG5jAIgSE2CyCH1BipNDcA2BFcnby8T/e69O00hFtgSbkm13Tc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230907104636-f5488de4-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":518152},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230907104636-f5488de4-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/fe5cac079e644cf9c1fbd33ee4c7fa38/blocksuite-virgo-0.0.0-20230907104636-f5488de4-nightly.tgz","_integrity":"sha512-H+aR9JVQbGjsMYoq7Rfz8mtDznsFa9I5cfBkCXDi2ITBPKESkoHb6tlTtHp5OGZPH0tX8qUu0OcVx7oXJLeUwQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230907104636-f5488de4-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230907104636-f5488de4-nightly_1694107768968_0.2981692764530892","host":"s3://npm-registry-packages"}},"0.0.0-20230907185700-6c99dd4f-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230907185700-6c99dd4f-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230907185700-6c99dd4f-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"980f8e0e916d7f2164188a04fcf951059c024341","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230907185700-6c99dd4f-nightly.tgz","fileCount":177,"integrity":"sha512-keF1HOicjywe6XvkjSlPrFIy2Tly66OoTgUhyCbmSuipAlaEJJsZe9ojNaodjWZgiA0f/7dqe+DghpsOcX4R4w==","signatures":[{"sig":"MEUCIQDiPUbo6O2KVYEwG/hlv53N+ajV5eTnALxTd831We1raQIgWr2FFqc+2b3hwFKjbBtYNAYOY1O6hjYpoa8oS4PFGlo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230907185700-6c99dd4f-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":518152},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230907185700-6c99dd4f-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/306c76b989ed4b55094245ab425f4e3a/blocksuite-virgo-0.0.0-20230907185700-6c99dd4f-nightly.tgz","_integrity":"sha512-keF1HOicjywe6XvkjSlPrFIy2Tly66OoTgUhyCbmSuipAlaEJJsZe9ojNaodjWZgiA0f/7dqe+DghpsOcX4R4w==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230907185700-6c99dd4f-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230907185700-6c99dd4f-nightly_1694113190903_0.9526014654609312","host":"s3://npm-registry-packages"}},"0.0.0-20230907210208-a9fef2d6-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230907210208-a9fef2d6-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230907210208-a9fef2d6-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"bf031fa20ae3b233cde1c10a49ec16ae1e3f2b9f","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230907210208-a9fef2d6-nightly.tgz","fileCount":177,"integrity":"sha512-JLUHFPNQs9468+Jis7oDr3GovzlINa/WWsaKodczaIbuhk/Davm1JTI7xvTGYGrt2tcAgWIMlwS4brDRd4Dqjg==","signatures":[{"sig":"MEUCIQDMUmNGbKiN9czniwA7xymNZYVSQ/VvHOZ7JBXoFywShgIgers5bh61Dn+e/8EI+CBeLJyaz/1WxNEjThLTt+3X1KY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230907210208-a9fef2d6-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":518152},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230907210208-a9fef2d6-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/7a30edcef2d2e7e9155d317722125cf0/blocksuite-virgo-0.0.0-20230907210208-a9fef2d6-nightly.tgz","_integrity":"sha512-JLUHFPNQs9468+Jis7oDr3GovzlINa/WWsaKodczaIbuhk/Davm1JTI7xvTGYGrt2tcAgWIMlwS4brDRd4Dqjg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230907210208-a9fef2d6-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230907210208-a9fef2d6-nightly_1694120858905_0.7724013608768341","host":"s3://npm-registry-packages"}},"0.0.0-20230907214521-21fbaa38-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230907214521-21fbaa38-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230907214521-21fbaa38-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"f2ae39cababd719602c294d587d30a51c72f8987","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230907214521-21fbaa38-nightly.tgz","fileCount":177,"integrity":"sha512-o8oRlrV5bse4ExDOa8Oj/IB16YqSMdfpKZGLukFniyxTTZC/kRHkyLN1XnmYWyEcyZlSwvX5JgT37M6UK5nasg==","signatures":[{"sig":"MEYCIQDNHJ4ykulcB0nssIWLJFfG0i9F4dCKghXUbJasyYtVDgIhAKPHPe20GN1phBC8UH8k5yXfJKFteCu3nc+coPEQoXx9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230907214521-21fbaa38-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":518152},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230907214521-21fbaa38-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/75a3831fc81fecd303dfa32a777cae24/blocksuite-virgo-0.0.0-20230907214521-21fbaa38-nightly.tgz","_integrity":"sha512-o8oRlrV5bse4ExDOa8Oj/IB16YqSMdfpKZGLukFniyxTTZC/kRHkyLN1XnmYWyEcyZlSwvX5JgT37M6UK5nasg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230907214521-21fbaa38-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230907214521-21fbaa38-nightly_1694124286940_0.6020088807981547","host":"s3://npm-registry-packages"}},"0.0.0-20230907222710-102d1e99-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230907222710-102d1e99-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230907222710-102d1e99-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"4d891880f2e14915883de95a2afc232d54a80b22","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230907222710-102d1e99-nightly.tgz","fileCount":177,"integrity":"sha512-k1uluZmpRasIprvYPUlSueoa2mfH/h0dUPELfM9cq6b5Nmv7gTdJG5zwlng1mmnzTrD6uqvQ35N92J0gm6CIHw==","signatures":[{"sig":"MEUCIQD+9JE+0bE3Q3ssrD6MJ4c33vQvKx+ZLQz/swQ+SS9SSAIgBYGPhjTcreQa8OIZaBx+MVKj0hP3Z+q2uVtXbL0Jo7Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230907222710-102d1e99-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":519179},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230907222710-102d1e99-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/787e831dcdc5f8c90a241655d06c1130/blocksuite-virgo-0.0.0-20230907222710-102d1e99-nightly.tgz","_integrity":"sha512-k1uluZmpRasIprvYPUlSueoa2mfH/h0dUPELfM9cq6b5Nmv7gTdJG5zwlng1mmnzTrD6uqvQ35N92J0gm6CIHw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230907222710-102d1e99-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230907222710-102d1e99-nightly_1694126077171_0.4128984779343541","host":"s3://npm-registry-packages"}},"0.0.0-20230908185655-61117b50-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230908185655-61117b50-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230908185655-61117b50-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"266b8ae0652c88bbc67437fa7146108abaa2b86d","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230908185655-61117b50-nightly.tgz","fileCount":177,"integrity":"sha512-u/cIiwMozPqUBgNNkI8c6WpfInE7zwDenx+qKkc8y8o2oNkywY+LLJ0tkunCvcgauxfGtWpOxuAsrpHTZzHSDw==","signatures":[{"sig":"MEYCIQD/Rwbc7FPzHeg39VjNILm1EGMIkRKhVkscQR0DgwvV/gIhAOFHFef3Qs+LWoKexdp2zT1T2gEv558lUG0tt0LrsEu1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230908185655-61117b50-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":524501},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230908185655-61117b50-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/89cff0b658fa44ebdd2615698bc4dbac/blocksuite-virgo-0.0.0-20230908185655-61117b50-nightly.tgz","_integrity":"sha512-u/cIiwMozPqUBgNNkI8c6WpfInE7zwDenx+qKkc8y8o2oNkywY+LLJ0tkunCvcgauxfGtWpOxuAsrpHTZzHSDw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230908185655-61117b50-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230908185655-61117b50-nightly_1694218896478_0.9967265752774572","host":"s3://npm-registry-packages"}},"0.0.0-20230909130440-65b0f0da-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230909130440-65b0f0da-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230909130440-65b0f0da-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"c03ce6f4a4e9154d8a4a8436665fb43246c5cbc5","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230909130440-65b0f0da-nightly.tgz","fileCount":177,"integrity":"sha512-oVYYxW/LXH15OfFjoW9BeBRWRIK+kHIQ0oDOKC7RL3y09nZ+4f4DXjW2WGCGCxr2Xuhd3MuELwjb9AUbpsNNhA==","signatures":[{"sig":"MEUCIAJqSLvEH+DeMRbBn/xB2dniaeWmcQ36x7c3Syt5MNCJAiEA8DfYQUMDnKbDAup62I4VZzmz5gWAi7JnxoutjiaDJzw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230909130440-65b0f0da-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":524501},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230909130440-65b0f0da-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/8bc678aa48df79f2b10369dbfdf026db/blocksuite-virgo-0.0.0-20230909130440-65b0f0da-nightly.tgz","_integrity":"sha512-oVYYxW/LXH15OfFjoW9BeBRWRIK+kHIQ0oDOKC7RL3y09nZ+4f4DXjW2WGCGCxr2Xuhd3MuELwjb9AUbpsNNhA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230909130440-65b0f0da-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230909130440-65b0f0da-nightly_1694305432026_0.31096606439224384","host":"s3://npm-registry-packages"}},"0.0.0-20230910163106-33a276b2-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230910163106-33a276b2-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230910163106-33a276b2-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"b9f589f833b7001dfb153d5636e942574a50934b","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230910163106-33a276b2-nightly.tgz","fileCount":177,"integrity":"sha512-VfIPa7g+keA3qiXT+kXS6mYFhCfgBtVRDQxjx3gaBrkQTVC7n5BFuw7bvVeUHGmSnNQhe0xjkva6ETUe/zYL5w==","signatures":[{"sig":"MEQCICPm2iABVbLRG0kq5MaMtn4JaCoZcJWLb8s6gXgEqVLTAiB9bwms/wVp279sNXpwVUVpgEhC36lLpUXW9nj50JnVKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230910163106-33a276b2-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":524501},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230910163106-33a276b2-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/f879bac20b20585a294427917b64beb0/blocksuite-virgo-0.0.0-20230910163106-33a276b2-nightly.tgz","_integrity":"sha512-VfIPa7g+keA3qiXT+kXS6mYFhCfgBtVRDQxjx3gaBrkQTVC7n5BFuw7bvVeUHGmSnNQhe0xjkva6ETUe/zYL5w==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230910163106-33a276b2-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230910163106-33a276b2-nightly_1694391792738_0.8448176512073511","host":"s3://npm-registry-packages"}},"0.0.0-20230911110410-f65fc3ab-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230911110410-f65fc3ab-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230911110410-f65fc3ab-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"0dfa3a4162e7387d1a45cfa5b60a795fdabee0a8","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230911110410-f65fc3ab-nightly.tgz","fileCount":177,"integrity":"sha512-kCtvGZSMe6KwB6kExAuTUL9UESUV2zzO+czZ09DuZc7IGSgNuVfwYjNpG+Xi6Hf8vgkiUtXeaZrez8lEErXGbw==","signatures":[{"sig":"MEQCIGHwHTb/qKxq7j0bqn4IDkJkEufm5LDe9dvfP3KGE2fDAiBXC01cGprRT4cFi8RKcRIxiNQKoUdwv90liNhEoyeqKA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230911110410-f65fc3ab-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":524501},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230911110410-f65fc3ab-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/b3fa5e99cf275d6a3c4f940472cf2c7e/blocksuite-virgo-0.0.0-20230911110410-f65fc3ab-nightly.tgz","_integrity":"sha512-kCtvGZSMe6KwB6kExAuTUL9UESUV2zzO+czZ09DuZc7IGSgNuVfwYjNpG+Xi6Hf8vgkiUtXeaZrez8lEErXGbw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230911110410-f65fc3ab-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230911110410-f65fc3ab-nightly_1694478083871_0.023085573546757665","host":"s3://npm-registry-packages"}},"0.0.0-20230912153951-446befe2-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230912153951-446befe2-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230912153951-446befe2-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"e074c4516a507fd4d2fa0118568a3308d23c0663","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230912153951-446befe2-nightly.tgz","fileCount":177,"integrity":"sha512-V+GsqnMrQBO3FQFuUIj/DuyGp8bo0xUGjPpZBbdaY5jsFouBbJWsfc+bfCeskZKhM+o82qZnBlZR3DACS+9ELQ==","signatures":[{"sig":"MEUCIDKcjh3trU9CXXQDom7NgnYmyxDzudkz7GCP16IewasIAiEAjH2X4muGutUyvHFGLQNXkOg2dRaqgzTTQh/uwL7w5Xc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230912153951-446befe2-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":519717},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230912153951-446befe2-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/1833c53f7179b9d32667d7ebff7cc1c0/blocksuite-virgo-0.0.0-20230912153951-446befe2-nightly.tgz","_integrity":"sha512-V+GsqnMrQBO3FQFuUIj/DuyGp8bo0xUGjPpZBbdaY5jsFouBbJWsfc+bfCeskZKhM+o82qZnBlZR3DACS+9ELQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230912153951-446befe2-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230912153951-446befe2-nightly_1694564592705_0.23433533606239432","host":"s3://npm-registry-packages"}},"0.0.0-20230913110404-34f93652-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230913110404-34f93652-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230913110404-34f93652-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"07f8fa73c5e99e0d4cf3a34e65a8b9fde6176b82","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230913110404-34f93652-nightly.tgz","fileCount":177,"integrity":"sha512-xXsLE8XSZQJIWIPgLBhaMyGxzi46mDoY9Lkhnw42Ipv4nhdEFS+mtsjnU5jSlCJch0AZDBT0uafGXHQR5XQ9oQ==","signatures":[{"sig":"MEYCIQCxsB6VUmv1O/PpZsJQpe+k4bITPIrO7WTYzNGUUPeuDQIhAMk5krz0FUoGGE+swNM1HrxamvodhgTuNd9iYiBTMStv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230913110404-34f93652-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":520380},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230913110404-34f93652-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/20c0a4872295c8b4393753ce494b498b/blocksuite-virgo-0.0.0-20230913110404-34f93652-nightly.tgz","_integrity":"sha512-xXsLE8XSZQJIWIPgLBhaMyGxzi46mDoY9Lkhnw42Ipv4nhdEFS+mtsjnU5jSlCJch0AZDBT0uafGXHQR5XQ9oQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230913110404-34f93652-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230913110404-34f93652-nightly_1694650941902_0.8880624109977253","host":"s3://npm-registry-packages"}},"0.0.0-20230914154016-d7677f0e-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230914154016-d7677f0e-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230914154016-d7677f0e-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"b815aa92b9c24bca24ef892713f389d5386eecf1","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230914154016-d7677f0e-nightly.tgz","fileCount":177,"integrity":"sha512-AFn1NLntGCtxdflkIq8qSTysvhDdCij05VxYycUfD9kz/Q0Lu7w4pSMtfN25W0//KD94h5vzdvErHkWVo8aGlQ==","signatures":[{"sig":"MEQCIDSBDuEEbGSg3QxSrYBOsMhBvV+5sZFkuaHecvG5ei7gAiByWKsCttxIElnP9d4SX4AMQ2Z/JrMq+c2NJDjHV/hjLA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230914154016-d7677f0e-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":520380},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230914154016-d7677f0e-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/c3a304c63296a522c1b242e6e1916720/blocksuite-virgo-0.0.0-20230914154016-d7677f0e-nightly.tgz","_integrity":"sha512-AFn1NLntGCtxdflkIq8qSTysvhDdCij05VxYycUfD9kz/Q0Lu7w4pSMtfN25W0//KD94h5vzdvErHkWVo8aGlQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230914154016-d7677f0e-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230914154016-d7677f0e-nightly_1694737370506_0.8783815910772597","host":"s3://npm-registry-packages"}},"0.0.0-20230915024743-71a1d5d0-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230915024743-71a1d5d0-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230915024743-71a1d5d0-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"e9871151330bf8c0a26eb6fa12948b049766de18","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230915024743-71a1d5d0-nightly.tgz","fileCount":177,"integrity":"sha512-uoBs0v9Bqwlp29ZeRNQyPV/3i0IMy259LlsHf1TMkSZC4F7p4XMsJN2vNTgkGvM/mzF5RSpilKEU+sUwY3H72w==","signatures":[{"sig":"MEUCIHNhdW0wA4mLb0acZ6/ezMEDU9zSLNbRMqdttIjhPVYmAiEA3kJ96/KugtYrFNW0Piv7XSpDo1BwW3lENh66RRuabDM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230915024743-71a1d5d0-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":520380},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230915024743-71a1d5d0-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/e309bde038e392759404af19ac5091b8/blocksuite-virgo-0.0.0-20230915024743-71a1d5d0-nightly.tgz","_integrity":"sha512-uoBs0v9Bqwlp29ZeRNQyPV/3i0IMy259LlsHf1TMkSZC4F7p4XMsJN2vNTgkGvM/mzF5RSpilKEU+sUwY3H72w==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230915024743-71a1d5d0-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230915024743-71a1d5d0-nightly_1694746199914_0.3305830520989197","host":"s3://npm-registry-packages"}},"0.0.0-20230915090114-978cb706-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230915090114-978cb706-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230915090114-978cb706-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"e9a2e28253e847b82146ff6a612323f7f6749ba5","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230915090114-978cb706-nightly.tgz","fileCount":177,"integrity":"sha512-GGFeJ5RVR/hjDTOIOkqrfF+NXRnrYjv9MPck33qMcrWNJAMLwizn2XpHNwXiDHEHsFG15jjBts+5RhsmN/+mbg==","signatures":[{"sig":"MEYCIQDpXXS1P8GhhSQwX8tja1JlU18Z2zgP9dCDi9licaccWQIhAM+bOckIbjfypxaeUretwcFHS5+jBc2jYmCgNLF13WpA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230915090114-978cb706-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":520380},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230915090114-978cb706-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/4559d7a60128e69f28ada3016e154aab/blocksuite-virgo-0.0.0-20230915090114-978cb706-nightly.tgz","_integrity":"sha512-GGFeJ5RVR/hjDTOIOkqrfF+NXRnrYjv9MPck33qMcrWNJAMLwizn2XpHNwXiDHEHsFG15jjBts+5RhsmN/+mbg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230915090114-978cb706-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230915090114-978cb706-nightly_1694807249921_0.8590920045250452","host":"s3://npm-registry-packages"}},"0.0.0-20230916000655-4af2f43d-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230916000655-4af2f43d-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230916000655-4af2f43d-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"b99ac88856226aa60f6e994ca420682ba3a65b35","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230916000655-4af2f43d-nightly.tgz","fileCount":177,"integrity":"sha512-iufuWnPwvmS8E3WiMG5pCGoK5tOtUD/ooKPDCr35tsOS7P1MaQTq/ylQ41rXAtHrdQ7hwQJgK8oeWQu0yD7bDg==","signatures":[{"sig":"MEUCIFhVfRSck5YP7mfkgP2YUzSATd8aMS2a7akvBp58v83CAiEAztBkzQmUVdCL7Ju0U4Ia1RCCuWaac4P9kzgcaPeEYq4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230916000655-4af2f43d-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":520380},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230916000655-4af2f43d-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/0c8f2e735fe270c94b9ef8c5f85c5355/blocksuite-virgo-0.0.0-20230916000655-4af2f43d-nightly.tgz","_integrity":"sha512-iufuWnPwvmS8E3WiMG5pCGoK5tOtUD/ooKPDCr35tsOS7P1MaQTq/ylQ41rXAtHrdQ7hwQJgK8oeWQu0yD7bDg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230916000655-4af2f43d-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230916000655-4af2f43d-nightly_1694823707916_0.3427952105118006","host":"s3://npm-registry-packages"}},"0.0.0-20230916185147-0c6fecc0-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230916185147-0c6fecc0-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230916185147-0c6fecc0-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"da31ebca9278f76bfd011628a191a1e47b9020d0","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230916185147-0c6fecc0-nightly.tgz","fileCount":177,"integrity":"sha512-xo+B51HHTOyGMOeSP242anRkm3cLJzr7FvnusZNt6XEcCz3UdVPwhrXldmqFxWml/bOs3jZefazXBOrsuxS1OQ==","signatures":[{"sig":"MEQCIG/aXjd+8tYUa/FSMsvJ4FEDvybLg4u0INQH856+zkyPAiB6tlo5QfVQ6/v+EqDgY1yW7+M/d6TxzUbo1v0iBL7njg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230916185147-0c6fecc0-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":520380},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230916185147-0c6fecc0-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/055dc6022406f34bc26dcecb10541c8f/blocksuite-virgo-0.0.0-20230916185147-0c6fecc0-nightly.tgz","_integrity":"sha512-xo+B51HHTOyGMOeSP242anRkm3cLJzr7FvnusZNt6XEcCz3UdVPwhrXldmqFxWml/bOs3jZefazXBOrsuxS1OQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230916185147-0c6fecc0-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230916185147-0c6fecc0-nightly_1694910252804_0.13609598725781935","host":"s3://npm-registry-packages"}},"0.0.0-20230917124854-21f7463c-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230917124854-21f7463c-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230917124854-21f7463c-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"008b8ea7949cc3e60d8c10275feaaedb6dc4f800","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230917124854-21f7463c-nightly.tgz","fileCount":177,"integrity":"sha512-TdgjMZD30hTNr5qlZ4ai+cSIJ1ylawsbHSdjogd6HpdyogEIdGNsaHm+6CVHa6PJUPwNZOW5l/f0a8ysJ9+y9w==","signatures":[{"sig":"MEQCIDjodjQbkru2t5HbtgVltUoQ8bVkxTV3pN5uUPQRqDd6AiBfdAOxBDpCKi/s0e7gpms/cSoxZzFwoqB0U3mYKsLDKQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230917124854-21f7463c-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":520380},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230917124854-21f7463c-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/f5d1f51e63ba5c02a88397996fc524ea/blocksuite-virgo-0.0.0-20230917124854-21f7463c-nightly.tgz","_integrity":"sha512-TdgjMZD30hTNr5qlZ4ai+cSIJ1ylawsbHSdjogd6HpdyogEIdGNsaHm+6CVHa6PJUPwNZOW5l/f0a8ysJ9+y9w==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230917124854-21f7463c-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230917124854-21f7463c-nightly_1694996580195_0.09989344111068577","host":"s3://npm-registry-packages"}},"0.0.0-20230919000022-43249faf-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230919000022-43249faf-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230919000022-43249faf-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"bcbea1d479e69abea0acd273d347dfb7dcea4e55","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230919000022-43249faf-nightly.tgz","fileCount":177,"integrity":"sha512-g+VtPx0MMyNgjjqJAjLfW0oeUWF11AkRhMgoITE0fjZaWRh2lwYSsjZtJigm24gHqSzcLXZK7JmP7lo+rJbZTg==","signatures":[{"sig":"MEUCIQDhGA+xjN01ccXbzRqc3RWxGPglrwjUbGngE/h2yutBGQIgTY1hkjCom849tz/t5WurP4NykS/Gq5c5N/pgk2YMMyo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230919000022-43249faf-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":507552},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230919000022-43249faf-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/46e16bffea979b7031baa28ea41ff4b3/blocksuite-virgo-0.0.0-20230919000022-43249faf-nightly.tgz","_integrity":"sha512-g+VtPx0MMyNgjjqJAjLfW0oeUWF11AkRhMgoITE0fjZaWRh2lwYSsjZtJigm24gHqSzcLXZK7JmP7lo+rJbZTg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230919000022-43249faf-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230919000022-43249faf-nightly_1695082993976_0.44214287502353944","host":"s3://npm-registry-packages"}},"0.0.0-20230919035452-9b4f2218-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230919035452-9b4f2218-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230919035452-9b4f2218-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"6d5c3342e31ee3f2b5a5d95a02dba3be4e83d9fe","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230919035452-9b4f2218-nightly.tgz","fileCount":177,"integrity":"sha512-S5f6wvy2dueAadMDWeoNg/qPc2haxjTSp6tCQRL/hYdrRSYkwqfl5xEbGClHYYDORpnd1Zie3psHc7ESjo6xSg==","signatures":[{"sig":"MEUCIQCJYQE4lhsW7j3ax52fKBDeCT8QOjLGemUj4g4Dt0ld/wIgNZg3UICddK9PddWkZlhqCvhvmthhWHTKQK8o+n1XlLs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230919035452-9b4f2218-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":508065},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230919035452-9b4f2218-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/ff000856891810c06fd3dfb3081304ce/blocksuite-virgo-0.0.0-20230919035452-9b4f2218-nightly.tgz","_integrity":"sha512-S5f6wvy2dueAadMDWeoNg/qPc2haxjTSp6tCQRL/hYdrRSYkwqfl5xEbGClHYYDORpnd1Zie3psHc7ESjo6xSg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230919035452-9b4f2218-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230919035452-9b4f2218-nightly_1695096685105_0.8856572400675442","host":"s3://npm-registry-packages"}},"0.0.0-20230919170443-ed5c7fa3-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230919170443-ed5c7fa3-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230919170443-ed5c7fa3-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"ca02ff8f43d85fec823dfdc636847e9c53fd0ce8","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230919170443-ed5c7fa3-nightly.tgz","fileCount":177,"integrity":"sha512-VHNZpywfuV4/7yx4ahKM9DQ3oX0Qa4NVvy295G6PR5sSwDxxMybzHMKk45zMPLyHvtrCT+lRgBmjlNJEj2PfcQ==","signatures":[{"sig":"MEUCIA1pTCTqVSWa6CL+c0zJjvtsKf+3rpchv511xtmqrrLUAiEA73MGYszyx3IBc36y3zmltkrdwM7foPMXTypl0mqvMzY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230919170443-ed5c7fa3-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":508065},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230919170443-ed5c7fa3-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/a18e433bd2e4ea637e9f2d02cbfe8bc4/blocksuite-virgo-0.0.0-20230919170443-ed5c7fa3-nightly.tgz","_integrity":"sha512-VHNZpywfuV4/7yx4ahKM9DQ3oX0Qa4NVvy295G6PR5sSwDxxMybzHMKk45zMPLyHvtrCT+lRgBmjlNJEj2PfcQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230919170443-ed5c7fa3-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230919170443-ed5c7fa3-nightly_1695169374230_0.20945612015225157","host":"s3://npm-registry-packages"}},"0.0.0-20230920185507-1ac1fefc-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230920185507-1ac1fefc-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230920185507-1ac1fefc-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"eb84968fb7acb66ed99f4600257c4097589d566e","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230920185507-1ac1fefc-nightly.tgz","fileCount":177,"integrity":"sha512-fKmujjKIa8P18gyfohVXSXlZDtJ8i3WLHaWJncwXWs5cQrESpMCuy9dUyKS0x4Ds6NX+owKVewBh5Q7AvBsgiw==","signatures":[{"sig":"MEUCIQDSbeByO039QKz4QWE3JgsMOckHXrkjS8FYCciq+RYXqAIgC+3Xp+HDqnJDu4BI5irB9Goxpr3T3iTkVIM+rkVxyWU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230920185507-1ac1fefc-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":508065},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230920185507-1ac1fefc-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/4c5e4ed581331134bb050e0382a172a4/blocksuite-virgo-0.0.0-20230920185507-1ac1fefc-nightly.tgz","_integrity":"sha512-fKmujjKIa8P18gyfohVXSXlZDtJ8i3WLHaWJncwXWs5cQrESpMCuy9dUyKS0x4Ds6NX+owKVewBh5Q7AvBsgiw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230920185507-1ac1fefc-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230920185507-1ac1fefc-nightly_1695236307489_0.2268645740570061","host":"s3://npm-registry-packages"}},"0.0.0-20230920200947-68bd641c-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230920200947-68bd641c-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230920200947-68bd641c-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"a4fa23c23bfe71475f4385ee862ca46dfbdfb9e6","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230920200947-68bd641c-nightly.tgz","fileCount":177,"integrity":"sha512-KI49yUGg2SOG01xCj3TYfLFTipjyNdsCYzElS3qQ0NMiKCz11Q+igJenV+ngn956H1DA/wHrOl3R36IaeyxfCw==","signatures":[{"sig":"MEUCIQCg27iuvyqwWi7Gd2ZVCWLQ/2yGuiKlArhTbUOIxflaUgIgdN2gfEU3MDSaaS0dVUPXo1C4eRHvbfdSTIIoVvZ5zV0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230920200947-68bd641c-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":508065},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230920200947-68bd641c-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/682b880eb8891910f9d7038885f552ea/blocksuite-virgo-0.0.0-20230920200947-68bd641c-nightly.tgz","_integrity":"sha512-KI49yUGg2SOG01xCj3TYfLFTipjyNdsCYzElS3qQ0NMiKCz11Q+igJenV+ngn956H1DA/wHrOl3R36IaeyxfCw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230920200947-68bd641c-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230920200947-68bd641c-nightly_1695255736988_0.2516337512429576","host":"s3://npm-registry-packages"}},"0.0.0-20230920225615-7a430559-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230920225615-7a430559-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230920225615-7a430559-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"67bd9f44170e4b454eddfe589882c29607799663","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230920225615-7a430559-nightly.tgz","fileCount":177,"integrity":"sha512-16ejWcNOwL4fzeS/5kbwbpTn2LnAgdScu+ianTgIJt/Yhf2wld+oKwlPmZTj4Ptoyte0ENJVm3rq3rNtmvr3mg==","signatures":[{"sig":"MEYCIQCNWVGYoI763hiEkKjK5Pf8dElTVoddIQmYRvLYgErWWAIhALMwoPM3kOzrsyfOVRPQMgPVUM8vNcFdOSmw5chRFVfo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230920225615-7a430559-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":508065},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230920225615-7a430559-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/2e2de74a8ecb194733f906d748de7210/blocksuite-virgo-0.0.0-20230920225615-7a430559-nightly.tgz","_integrity":"sha512-16ejWcNOwL4fzeS/5kbwbpTn2LnAgdScu+ianTgIJt/Yhf2wld+oKwlPmZTj4Ptoyte0ENJVm3rq3rNtmvr3mg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230920225615-7a430559-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230920225615-7a430559-nightly_1695265722086_0.7599914928030431","host":"s3://npm-registry-packages"}},"0.0.0-20230921050035-7e4bb7d9-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230921050035-7e4bb7d9-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230921050035-7e4bb7d9-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"93cec5714b983ab107e438629e1ce361d0beb492","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230921050035-7e4bb7d9-nightly.tgz","fileCount":177,"integrity":"sha512-Ch1taeeAn7Pi0/CZXpcTgDFtIa97HXRtB2KZd1EE2/PX6cTDNxTIxFp8DOlWvSKQfZfDyDiURfGCujf5girIMw==","signatures":[{"sig":"MEUCIF7dHGveqEVyA0q8r+rTBG0b+9SpGgRKg0XHbHSDpI+dAiEAqMhg9TKg0wCnwsSC4ha2MV/iDRzqp1AZ4RSsWHF7dYE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230921050035-7e4bb7d9-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":508065},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230921050035-7e4bb7d9-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/583b8d50b9b1a8cadf2f817086585b9e/blocksuite-virgo-0.0.0-20230921050035-7e4bb7d9-nightly.tgz","_integrity":"sha512-Ch1taeeAn7Pi0/CZXpcTgDFtIa97HXRtB2KZd1EE2/PX6cTDNxTIxFp8DOlWvSKQfZfDyDiURfGCujf5girIMw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230921050035-7e4bb7d9-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230921050035-7e4bb7d9-nightly_1695272608592_0.5224251969782285","host":"s3://npm-registry-packages"}},"0.0.0-20230921052800-cdd48566-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230921052800-cdd48566-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230921052800-cdd48566-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"c0dda6882f91883460d035df3fb3a496cb1d6f9d","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230921052800-cdd48566-nightly.tgz","fileCount":177,"integrity":"sha512-l6z/CIPHvrRz26TtgR0fNoDzbSM1atx+7NVXTOYctPGcgRtzpEaLvmF2hv3583zwO5BvUxOhDkilEbtLXbemAA==","signatures":[{"sig":"MEUCIQC2/CrzpzSZ1vsDshf3++JjJYX8DDpupibTyAP8fOm1BQIgQgpvWxjG91OnO3O+G+AuhN3b5TGjtX9da1wPtaf9G3o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230921052800-cdd48566-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":508065},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230921052800-cdd48566-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/33c52c62d77861192de26ef37d859811/blocksuite-virgo-0.0.0-20230921052800-cdd48566-nightly.tgz","_integrity":"sha512-l6z/CIPHvrRz26TtgR0fNoDzbSM1atx+7NVXTOYctPGcgRtzpEaLvmF2hv3583zwO5BvUxOhDkilEbtLXbemAA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230921052800-cdd48566-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230921052800-cdd48566-nightly_1695274285694_0.11170035821608892","host":"s3://npm-registry-packages"}},"0.0.0-20230921053452-d014310e-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230921053452-d014310e-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230921053452-d014310e-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"dd85f3229a526c94f4f88e567f041958fa59d3ad","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230921053452-d014310e-nightly.tgz","fileCount":177,"integrity":"sha512-q58NPBcIyT51nG1+jOleJuRou8qSGd7uib7fiHIJ88GN7p1n5pZuKjnZhtbKX+hlQUPgpbCWbb9yfdc4FG+CiQ==","signatures":[{"sig":"MEYCIQDU2N/u4VwgsaouhDxrSG/SQ6PfS5VFbuQODwRTv7fbZQIhAOXtNphZadaFzSfRNHFX0cbVYkVBy4hAGF4PsRtDAkNZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230921053452-d014310e-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":508065},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230921053452-d014310e-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/e1d01fa3bfe5fb0bcd36fe59e541012c/blocksuite-virgo-0.0.0-20230921053452-d014310e-nightly.tgz","_integrity":"sha512-q58NPBcIyT51nG1+jOleJuRou8qSGd7uib7fiHIJ88GN7p1n5pZuKjnZhtbKX+hlQUPgpbCWbb9yfdc4FG+CiQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230921053452-d014310e-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230921053452-d014310e-nightly_1695274698638_0.5217473404665731","host":"s3://npm-registry-packages"}},"0.0.0-20230921103931-38d8f07a-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230921103931-38d8f07a-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230921103931-38d8f07a-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"8e250f580b964e396f5c06161f09c5da5eb57954","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230921103931-38d8f07a-nightly.tgz","fileCount":177,"integrity":"sha512-Gs139Bcg4FqTLxmRfV11Ue4i7hBt4ByeJlCmUxx1FFkUg2kd0OGLvEhLfq6gq6yxoj8T1URK3oALY94x7grtOw==","signatures":[{"sig":"MEYCIQC2p6xNdrq1hvpdkO+upcluhMP4J5wlia+KU4vnwEsMawIhAKUCIPka28ZG/+njMX4SiIn5rDkxdvltFsieiChCs+iZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230921103931-38d8f07a-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":508065},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230921103931-38d8f07a-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/8fa89c85dd6dbe3caca346d0b42d1953/blocksuite-virgo-0.0.0-20230921103931-38d8f07a-nightly.tgz","_integrity":"sha512-Gs139Bcg4FqTLxmRfV11Ue4i7hBt4ByeJlCmUxx1FFkUg2kd0OGLvEhLfq6gq6yxoj8T1URK3oALY94x7grtOw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230921103931-38d8f07a-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230921103931-38d8f07a-nightly_1695324925785_0.6660987216739565","host":"s3://npm-registry-packages"}},"0.0.0-20230921131319-c9560872-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230921131319-c9560872-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230921131319-c9560872-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"b68170eb1c41c2e576d208d3947e8b8f9425965a","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230921131319-c9560872-nightly.tgz","fileCount":177,"integrity":"sha512-VAnkOz0zXubVx4AGUgN9NNPKfXjZ8ZOyiJEoXR7Krsa+V9j890PXiHCtyuKGGpAUuPPwqIO+HwVoKW7P/Z9aRA==","signatures":[{"sig":"MEUCIA+UXhqXj1+dZCN/iDEvUCCC4576a9Y+0wWTmXDLcj6gAiEA/IVy7SGc+7ll09wWPZD+85mOhmmMGXVS0YR9Y6rFM5o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230921131319-c9560872-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":508065},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230921131319-c9560872-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/0f300eaf99af3d9451182f91e9f79bdb/blocksuite-virgo-0.0.0-20230921131319-c9560872-nightly.tgz","_integrity":"sha512-VAnkOz0zXubVx4AGUgN9NNPKfXjZ8ZOyiJEoXR7Krsa+V9j890PXiHCtyuKGGpAUuPPwqIO+HwVoKW7P/Z9aRA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230921131319-c9560872-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230921131319-c9560872-nightly_1695342163606_0.3779239974396509","host":"s3://npm-registry-packages"}},"0.0.0-20230922124454-d10c8fac-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230922124454-d10c8fac-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230922124454-d10c8fac-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"0eff87801e823f4aa0023c6077186681fde75be0","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230922124454-d10c8fac-nightly.tgz","fileCount":177,"integrity":"sha512-NtSXdzzZ5ZqcvYP88nmJ0gUVQNT5F0sFAwMrL7T3QE6ETlF2t6MBUVOdk89Ubo9VOWzLdFpue3N+FyFRwuuBdg==","signatures":[{"sig":"MEQCIBPVvPIk3ZZxSgEQPU9mkbX1U4MbtdenmkqPXMu1YmP9AiAy4Alc4LSXLxvRNeh9mcwiQ2PfH4fknD15myI1tEvlCg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230922124454-d10c8fac-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":508065},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230922124454-d10c8fac-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/2bbeff023f692505c956843fcea4fceb/blocksuite-virgo-0.0.0-20230922124454-d10c8fac-nightly.tgz","_integrity":"sha512-NtSXdzzZ5ZqcvYP88nmJ0gUVQNT5F0sFAwMrL7T3QE6ETlF2t6MBUVOdk89Ubo9VOWzLdFpue3N+FyFRwuuBdg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230922124454-d10c8fac-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230922124454-d10c8fac-nightly_1695428500585_0.05945703761327814","host":"s3://npm-registry-packages"}},"0.0.0-20230923161429-c57d2113-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230923161429-c57d2113-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230923161429-c57d2113-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"4004b2d456296170e9ac2bc62a5772c5faacd009","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230923161429-c57d2113-nightly.tgz","fileCount":177,"integrity":"sha512-VQ30/vHkO4Vnd3bL8Dr466hdufPR/7YsTCjkIAnsI6ixgZz9xoq4g/7xSLH0ORsAUSW9p2G8T801m6gW3+RkOA==","signatures":[{"sig":"MEQCIAoBI0lwcP+ior/h6OY+SwxOsAu3EnGM9UNJvtLhr7AoAiBSz4AphSgIz9Z/y02zHKEkiE1W84Dm2EYyi6e00bstOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230923161429-c57d2113-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":508065},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230923161429-c57d2113-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/dfdbbb723409b26171de4363ad40f189/blocksuite-virgo-0.0.0-20230923161429-c57d2113-nightly.tgz","_integrity":"sha512-VQ30/vHkO4Vnd3bL8Dr466hdufPR/7YsTCjkIAnsI6ixgZz9xoq4g/7xSLH0ORsAUSW9p2G8T801m6gW3+RkOA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230923161429-c57d2113-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230923161429-c57d2113-nightly_1695515043545_0.24799227267079949","host":"s3://npm-registry-packages"}},"0.0.0-20230924223737-8993bc0f-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230924223737-8993bc0f-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230924223737-8993bc0f-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"f2812990507e2240d8daac976f825a08adb73bd9","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230924223737-8993bc0f-nightly.tgz","fileCount":177,"integrity":"sha512-8uI7lJFOxo/ccKv9DfsjcXDmh9JbqQoUz75JsdDzyMyzMtQFK2tG/ZeJP4LC7ANvs4ah+/ZmMzhe4ExNRvW9iA==","signatures":[{"sig":"MEYCIQD76xI7DOFwptOqPynvJYG/SbJ715NiNYZXD+nB6NlGMwIhAOBzaatTnMxjDUYW35hm4BbsB978WBEe1U790J+PdY0G","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230924223737-8993bc0f-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":508065},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230924223737-8993bc0f-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/08402bfb4c9ceeb3bd1c88bb39dd0980/blocksuite-virgo-0.0.0-20230924223737-8993bc0f-nightly.tgz","_integrity":"sha512-8uI7lJFOxo/ccKv9DfsjcXDmh9JbqQoUz75JsdDzyMyzMtQFK2tG/ZeJP4LC7ANvs4ah+/ZmMzhe4ExNRvW9iA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230924223737-8993bc0f-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230924223737-8993bc0f-nightly_1695601430269_0.26097909485480875","host":"s3://npm-registry-packages"}},"0.0.0-20230925163612-6d2dbfcc-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230925163612-6d2dbfcc-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230925163612-6d2dbfcc-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"49fed2240e0eeb50299c93d541a4b1c0be339afc","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230925163612-6d2dbfcc-nightly.tgz","fileCount":177,"integrity":"sha512-7zva91lIP7VkWSQvEiT4zTdExY7BKwkL8LNtDIhXPV+MvCbxffiMITvvaQlswVC+MLGa52uTzUy5hQ21+nJTRg==","signatures":[{"sig":"MEUCICu7VqnD9Af2ED0TxmOdFghJCVOcFElLUhrNBYMa+4HQAiEAwNcTcAP0KI+KYQ6RHnBhSyBeQGD8kmDnqwFxWEXuPoM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230925163612-6d2dbfcc-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":511640},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230925163612-6d2dbfcc-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/780f81ad4e671fa37714d1bbc072a57e/blocksuite-virgo-0.0.0-20230925163612-6d2dbfcc-nightly.tgz","_integrity":"sha512-7zva91lIP7VkWSQvEiT4zTdExY7BKwkL8LNtDIhXPV+MvCbxffiMITvvaQlswVC+MLGa52uTzUy5hQ21+nJTRg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230925163612-6d2dbfcc-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230925163612-6d2dbfcc-nightly_1695687816633_0.23996067775750496","host":"s3://npm-registry-packages"}},"0.0.0-20230926212737-6d4b1569-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230926212737-6d4b1569-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230926212737-6d4b1569-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"3eda3f82ef812f24460bc32e8981f2afadba0c80","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230926212737-6d4b1569-nightly.tgz","fileCount":177,"integrity":"sha512-IkC4pGSUDBseEh3qria3JonImMtN+XyQMiMyH9kpJhmus8MfPfwjWUVNZ4s4q/4xmKQzokZnjfRG/1HfPKth3g==","signatures":[{"sig":"MEUCID3syJQA53JqOPgQLJRlX4UJXKUypSbhOUYmilUIezfBAiEAiPHFQzVLqiV1xOwLFIMvuPb894QMqtClwvGgjCtBYmQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230926212737-6d4b1569-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":511648},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230926212737-6d4b1569-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/421333185accb67ad7a05b9a6cdda547/blocksuite-virgo-0.0.0-20230926212737-6d4b1569-nightly.tgz","_integrity":"sha512-IkC4pGSUDBseEh3qria3JonImMtN+XyQMiMyH9kpJhmus8MfPfwjWUVNZ4s4q/4xmKQzokZnjfRG/1HfPKth3g==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230926212737-6d4b1569-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230926212737-6d4b1569-nightly_1695774162300_0.05099730730585805","host":"s3://npm-registry-packages"}},"0.0.0-20230927141016-cdc360d8-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230927141016-cdc360d8-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230927141016-cdc360d8-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"363656a970dc5e9ed8833583d908a2aaeda30261","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230927141016-cdc360d8-nightly.tgz","fileCount":177,"integrity":"sha512-4NJYSvTfyi07QMzGyNYDzJiRQTISjAosRAVnQed8NKSR5hLOu8rEbsSZUUb2CzAZGhOIQljFRR+Q23S3RRwbEg==","signatures":[{"sig":"MEUCIQCQRsDMHRYnCBqJkBMssUe3LqA34/5iB8jJUTqhhLlNaQIgYJqY9tTE5Xp2y/XpnjPe4oZUJ9glzng054fnUhx+nbE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230927141016-cdc360d8-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v0.2"}},"unpackedSize":511648},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230927141016-cdc360d8-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/2ef2ca0f2228eb04777894017010cd55/blocksuite-virgo-0.0.0-20230927141016-cdc360d8-nightly.tgz","_integrity":"sha512-4NJYSvTfyi07QMzGyNYDzJiRQTISjAosRAVnQed8NKSR5hLOu8rEbsSZUUb2CzAZGhOIQljFRR+Q23S3RRwbEg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.6.7","description":"A micro editor.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230927141016-cdc360d8-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230927141016-cdc360d8-nightly_1695860567630_0.759921556420561","host":"s3://npm-registry-packages"}},"0.0.0-20230928220834-dd640ee7-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230928220834-dd640ee7-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230928220834-dd640ee7-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"9d12fe65205b2343b7544a321244a608a4b9ea4a","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230928220834-dd640ee7-nightly.tgz","fileCount":177,"integrity":"sha512-zaIi9C5noMLbSemAX1ybgKMlSfpWwqghGw5ic7pqD1xS9QjdfAHXEfkA1pi0T2zqYGAyG7/JVNYZ0u7xtES7+A==","signatures":[{"sig":"MEQCIFkOrouTFJzNFGo80fnQsPTBTSnONhFweZszOxCj0c30AiA8HY6c3AAZ/NB/xgiqBn9utnnA6usCd4FLxG2F2kmgLg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230928220834-dd640ee7-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":511648},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230928220834-dd640ee7-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/dd84681aa1581e7e252b3aefddad33b3/blocksuite-virgo-0.0.0-20230928220834-dd640ee7-nightly.tgz","_integrity":"sha512-zaIi9C5noMLbSemAX1ybgKMlSfpWwqghGw5ic7pqD1xS9QjdfAHXEfkA1pi0T2zqYGAyG7/JVNYZ0u7xtES7+A==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.0","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230928220834-dd640ee7-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230928220834-dd640ee7-nightly_1695946990558_0.7645354909798874","host":"s3://npm-registry-packages"}},"0.0.0-20230929113624-bf8a1012-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20230929113624-bf8a1012-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20230929113624-bf8a1012-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"5f7be948366a573c1dfedca024f32ac8548b3715","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20230929113624-bf8a1012-nightly.tgz","fileCount":177,"integrity":"sha512-cVSW3vqS+B6x9K6Zxxcsw5DMhkyUksB4R12YbVRbG5+OPX9rsL249bUcxAmgPRsJVSN2tuEJwsu+F3keQ9EDKQ==","signatures":[{"sig":"MEUCIG/E7z8RRfRznzmYqRTNWQd7klLAmwXXLU5BPu3M2ZIjAiEAw6QCo8gst07+nwBWb0U2uQBOBXrbZ030uTQ+iA9rPx0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20230929113624-bf8a1012-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":511648},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20230929113624-bf8a1012-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/82822790c180f43af694e7cbaf76d317/blocksuite-virgo-0.0.0-20230929113624-bf8a1012-nightly.tgz","_integrity":"sha512-cVSW3vqS+B6x9K6Zxxcsw5DMhkyUksB4R12YbVRbG5+OPX9rsL249bUcxAmgPRsJVSN2tuEJwsu+F3keQ9EDKQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.0","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20230929113624-bf8a1012-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20230929113624-bf8a1012-nightly_1696033345840_0.36188546711849034","host":"s3://npm-registry-packages"}},"0.0.0-20231001000339-3a03b2d4-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231001000339-3a03b2d4-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231001000339-3a03b2d4-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"3e829e1ef66629263982abdfdff195f9d732d2e8","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231001000339-3a03b2d4-nightly.tgz","fileCount":177,"integrity":"sha512-Dw+F86cE8YCAmxH2mod8jC9PTjw1W3gfQf3I1euSMhwUWQb1OcHqZpV7ZWlBRr4tvJy6b4lVeRiOFeb+eq2QqQ==","signatures":[{"sig":"MEUCIEpvxFChLcrzj7SWw6xBlBSYzOSQNt6Q4uabFLTIHczPAiEA+1x8E6AMp9EiVPUiJGOZIfOaEo7FvxFZVPxOtIyFsUA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231001000339-3a03b2d4-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":511648},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231001000339-3a03b2d4-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/8757e3349d6ed34e1eb5356f0dc29a9b/blocksuite-virgo-0.0.0-20231001000339-3a03b2d4-nightly.tgz","_integrity":"sha512-Dw+F86cE8YCAmxH2mod8jC9PTjw1W3gfQf3I1euSMhwUWQb1OcHqZpV7ZWlBRr4tvJy6b4lVeRiOFeb+eq2QqQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.0","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20231001000339-3a03b2d4-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231001000339-3a03b2d4-nightly_1696119989014_0.002264694516992627","host":"s3://npm-registry-packages"}},"0.0.0-20231001105326-1ce1cfd2-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231001105326-1ce1cfd2-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231001105326-1ce1cfd2-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"ce572d806f2344d788f634af293ca6eba382640b","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231001105326-1ce1cfd2-nightly.tgz","fileCount":177,"integrity":"sha512-cFR/f6hH66Ay/+VhN59NCtnGV+xkayhM4BAHFmFd1y0FYm+90I30Q6KrRRlBVZSkjFHU3dBF2qHOTwTWBnOCJQ==","signatures":[{"sig":"MEQCIHIOJ56YjiOMuwzDaZ0Wo6oJgaUqojajgi707LYrNwjNAiAmcJdX+RAl3RRVk5xSOVZObsp5rZAulcCf2SoxxIyuWw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231001105326-1ce1cfd2-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":511648},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231001105326-1ce1cfd2-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/7a39f2ffbd2309200fe5f9e9eac95ef2/blocksuite-virgo-0.0.0-20231001105326-1ce1cfd2-nightly.tgz","_integrity":"sha512-cFR/f6hH66Ay/+VhN59NCtnGV+xkayhM4BAHFmFd1y0FYm+90I30Q6KrRRlBVZSkjFHU3dBF2qHOTwTWBnOCJQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.0","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20231001105326-1ce1cfd2-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231001105326-1ce1cfd2-nightly_1696206232477_0.5943010100923845","host":"s3://npm-registry-packages"}},"0.0.0-20231002183259-cf2c7ed1-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231002183259-cf2c7ed1-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231002183259-cf2c7ed1-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"69c2266946f9dc96aa1c8fde4d5176d84105f66d","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231002183259-cf2c7ed1-nightly.tgz","fileCount":177,"integrity":"sha512-9jBvLFsiUkoDlCpXE2oITAwKQPOm9NbFhu1lIl3ni9l250HpyDH5mQewdvqapgh4hYwb6MEufEZ0QLPeI4XtZA==","signatures":[{"sig":"MEUCIQDkKdBz9IL8dM124PwBueracJDvEtfLpZFwTTPOOOhf1AIgKcG8n6H/hGfYEqkwu01+GkaziYsWNSd5Tu0x5LDpDk8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231002183259-cf2c7ed1-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":511648},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231002183259-cf2c7ed1-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/c8b62ebd2b10eff216493ce723ed071b/blocksuite-virgo-0.0.0-20231002183259-cf2c7ed1-nightly.tgz","_integrity":"sha512-9jBvLFsiUkoDlCpXE2oITAwKQPOm9NbFhu1lIl3ni9l250HpyDH5mQewdvqapgh4hYwb6MEufEZ0QLPeI4XtZA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.0","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20231002183259-cf2c7ed1-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231002183259-cf2c7ed1-nightly_1696292614571_0.893308221429453","host":"s3://npm-registry-packages"}},"0.0.0-20231003121106-9641d418-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231003121106-9641d418-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231003121106-9641d418-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"dce56d9371f49d1fd689a777a1a26e9d2c2d9849","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231003121106-9641d418-nightly.tgz","fileCount":177,"integrity":"sha512-QM8+265xgEGSXE/b7N9gHaAYHiqHENlt9q9O6hSkpV6dFSCisTdSQScphhUsiXUBJwyjQTbpHejhbokP8yttsw==","signatures":[{"sig":"MEQCIHYzbFVMsk8e0B2hpFNjn8ahgZbGOu79/7sFbuGj7CWDAiAyh8NUM5shhHUr3MawbINQchfk9ViNSeFmksS1h0Hy7Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231003121106-9641d418-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":522375},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231003121106-9641d418-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/b50b8e18540e6d4194282a5ab93afebc/blocksuite-virgo-0.0.0-20231003121106-9641d418-nightly.tgz","_integrity":"sha512-QM8+265xgEGSXE/b7N9gHaAYHiqHENlt9q9O6hSkpV6dFSCisTdSQScphhUsiXUBJwyjQTbpHejhbokP8yttsw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.0","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20231003121106-9641d418-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231003121106-9641d418-nightly_1696379000789_0.9043695830368825","host":"s3://npm-registry-packages"}},"0.0.0-20231004042412-b8302951-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231004042412-b8302951-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231004042412-b8302951-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"1db2ee22fd8ce3e9494cbdf97e81899637e45a02","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231004042412-b8302951-nightly.tgz","fileCount":177,"integrity":"sha512-qjSaV7VObpYL52ojCPEJe6iVmyKaxpkKpRW/0DigL244KqziMacOJeHx7hVnWvw23LrZW0WkzEneSD98L7rcEw==","signatures":[{"sig":"MEUCICyZ+put2H+XN9OB27Wzw5Q+HyBojt5kILhc1Ix5j+t6AiEA5T30aohvj3cqgiK1OIjQWkJs7cBMhF43QEYge/PbPRw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231004042412-b8302951-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":522375},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231004042412-b8302951-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a minimized rich-text editing kernel that synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text), which differs from other rich-text editing frameworks in that its data model are _natively_ CRDT. For example, to support collaborative editing in Slate.js, you may need to use a plugin like slate-yjs, a wrapper around [Yjs](https://github.com/yjs/yjs). In these plugins, all text operations should be converted between Yjs and Slate.js operations. This may result in undo/redo properly and hard to maintain the code. However, with Virgo, we can directly synchronize the DOM state between Yjs and DOM, which means that the state in Yjs is the single source of truth. It signify that to update, can just calling the `Y.Text` API to manipulate the DOM state, which could significantly reduces the complexity of the editor.\n\nInitially in BlockSuite, we use [Quill](https://github.com/quilljs/quill) for in-block rich-text editing, which only utilizes a small subset of its APIs. Every paragraph in BlockSuite is managed in a standalone Quill instance, which is attached to a `Y.Text` instance for collaborative editing. Virgo makes this further simpler, since what it needs to do is the same as how we use the Quill subset. It just needs to provide a flat rich-text synchronization mechanism, since the block-tree-level state management is handled by the data store in BlockSuite.\n\nA virgo editor state corresponds to `Y.Text`, it's easy to convert between them. Virgo also provides a `Delta` format to represent the editor state, which is also supported by Yjs. So we can use Yjs to manipulate all the states of the text including format.\n\n```ts\nconst yText = new Y.Text();\n\n// Bind Y.Text to virgo editor, then type 'aaa\\nbbb'\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aaa\\nbbb',\n  },\n];\n*/\n```\n\nIf you format from the first character to the second character, the string representation in `Y.Text` will still be `aaa\\nbbb`. But if we covert it to Delta, you will see the difference:\n\n```ts\n// Continue the example before, format 'aa' to bold\n// ...\nconsole.log(yText.toString()); // 'aaa\\nbbb'\n\nconsole.log(yText.toDelta());\n/*\n[\n  {\n    insert: 'aa',\n    attributes: {\n      bold: true,\n    },\n  },\n  {\n    insert: 'a\\nbbb',\n  },\n];\n*/\n```\n\nYou will see that there is a `type` attribute in the Delta format, which is used to represent the type of text segments, like base text (bold, italic, line-break, inline-code, link, etc.). This format makes it easy implementing customized inline elements.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nimport * as Y from 'yjs';\nimport { VEditor } from '@blocksuite/virgo';\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n> 🚧 The documentation about customizing inline elements and detailed APIs are still in progress. Stay tuned!\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/2558064919534b7b0d5b705f11b71719/blocksuite-virgo-0.0.0-20231004042412-b8302951-nightly.tgz","_integrity":"sha512-qjSaV7VObpYL52ojCPEJe6iVmyKaxpkKpRW/0DigL244KqziMacOJeHx7hVnWvw23LrZW0WkzEneSD98L7rcEw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.0","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20231004042412-b8302951-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231004042412-b8302951-nightly_1696465376871_0.21953967789435347","host":"s3://npm-registry-packages"}},"0.0.0-20231008115225-c3aa109d-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231008115225-c3aa109d-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231008115225-c3aa109d-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"a2570bfc640a16c023e58f8ab031f3e970ba6867","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231008115225-c3aa109d-nightly.tgz","fileCount":177,"integrity":"sha512-+mSqsNA/0pV/vi+jce0ly9G/Q0hv/Y9IOaEt2xX/gYErl/Wg1+jk3P3MYL351XYdXY0aCeoVrJ7bkPdh0WMuvw==","signatures":[{"sig":"MEQCIF56rTDB/GizFei5GGmFTksNuflYi72Vada/NSCbpRefAiAHTeFypC2MdzcVu3uMCBmanJ97OZBUGEHTG5bF9VxAfA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231008115225-c3aa109d-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":524136},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231008115225-c3aa109d-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/11d0022668bd0a74a70b919074b34f73/blocksuite-virgo-0.0.0-20231008115225-c3aa109d-nightly.tgz","_integrity":"sha512-+mSqsNA/0pV/vi+jce0ly9G/Q0hv/Y9IOaEt2xX/gYErl/Wg1+jk3P3MYL351XYdXY0aCeoVrJ7bkPdh0WMuvw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.0","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20231008115225-c3aa109d-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231008115225-c3aa109d-nightly_1696811032905_0.8413675947247552","host":"s3://npm-registry-packages"}},"0.0.0-20231009110852-1342c43f-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231009110852-1342c43f-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231009110852-1342c43f-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"fc0b1c31ad2c4b2df62b5d1266df23b167f7a7b1","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231009110852-1342c43f-nightly.tgz","fileCount":177,"integrity":"sha512-ZrO/fLBRZ+YmcbOAeE+NeMALLMXhVKQ4zAMWtNnv4Dmd+55/aw+8uQ4Lp6lHHpH3O4VIMDKOhhS4nCY3735pmA==","signatures":[{"sig":"MEUCIQCObVAgKZ38C1zoM9zIIzr9Lx+MZeKSGRjp1Fv1ud21nQIgbV/S568x34wyzm3zLa7ymQXJART4hxkhcd2w4LiTMfw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231009110852-1342c43f-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":524141},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231009110852-1342c43f-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/6a6c65447ee5ad0a0675c958c9e19660/blocksuite-virgo-0.0.0-20231009110852-1342c43f-nightly.tgz","_integrity":"sha512-ZrO/fLBRZ+YmcbOAeE+NeMALLMXhVKQ4zAMWtNnv4Dmd+55/aw+8uQ4Lp6lHHpH3O4VIMDKOhhS4nCY3735pmA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.0","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20231009110852-1342c43f-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231009110852-1342c43f-nightly_1696897386670_0.7757091620519447","host":"s3://npm-registry-packages"}},"0.0.0-20231010093124-eb528310-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231010093124-eb528310-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231010093124-eb528310-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"5c4d71aac0d23241ad7a8840efc36dc8888ad6d5","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231010093124-eb528310-nightly.tgz","fileCount":177,"integrity":"sha512-AlGpyoHKYXjCT9ybd3oqQo4ilQ79bXrrH50iDwas/P7f08fTBpwY4VW87InbrQeBXqacymjzEQyUfQMaR/Y5BQ==","signatures":[{"sig":"MEMCHz+PaE1Hx875Avno1tkhysFIdscX7DAOEjQTtudQtEQCIH9OSkoNYMLf+0Puku7RmUdUMtRsaEeAWbWIR+pziB84","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231010093124-eb528310-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":524141},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231010093124-eb528310-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/6d3840163caee426b4511ab4967680cc/blocksuite-virgo-0.0.0-20231010093124-eb528310-nightly.tgz","_integrity":"sha512-AlGpyoHKYXjCT9ybd3oqQo4ilQ79bXrrH50iDwas/P7f08fTBpwY4VW87InbrQeBXqacymjzEQyUfQMaR/Y5BQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.0","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20231010093124-eb528310-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231010093124-eb528310-nightly_1696983786383_0.18574187898795969","host":"s3://npm-registry-packages"}},"0.0.0-20231011102951-763786d7-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231011102951-763786d7-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231011102951-763786d7-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"b069fa55c0b7fbb97a86d95f0e3102bcd1e1446f","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231011102951-763786d7-nightly.tgz","fileCount":177,"integrity":"sha512-cZaGWXLm2nxtTnAcyhqH2ouGHkz98KxafYVTsLxy0xl5prFS/QcALoIvuD30nMeI/Bd6r9EqDB+gFTOw45kmXA==","signatures":[{"sig":"MEUCIQDzUQHM9i2OIDrGV5EUi57HjdbvS0YTAnD9qUUFdmYffgIgIjhWHwANn1Ba4y6fHDHbLFU5AcX9IevNV9904Y6qAYI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231011102951-763786d7-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":524141},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231011102951-763786d7-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/a78e994e8c373eb91999c60e6111949a/blocksuite-virgo-0.0.0-20231011102951-763786d7-nightly.tgz","_integrity":"sha512-cZaGWXLm2nxtTnAcyhqH2ouGHkz98KxafYVTsLxy0xl5prFS/QcALoIvuD30nMeI/Bd6r9EqDB+gFTOw45kmXA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.0","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20231011102951-763786d7-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231011102951-763786d7-nightly_1697070100697_0.870348713249218","host":"s3://npm-registry-packages"}},"0.0.0-20231012110022-883c3ab3-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231012110022-883c3ab3-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231012110022-883c3ab3-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"0e8e5fcaa65be97de87bf3ddef725c7efdd47716","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231012110022-883c3ab3-nightly.tgz","fileCount":177,"integrity":"sha512-YbSKkjZzmqn98ZU9bWz+aTWn/PZwChempUBkWepZB0vOewFvkwZO0dnNOB+kRxwP3oqRlPoCKyu059qfwGIUhw==","signatures":[{"sig":"MEQCIHpm9jbXPn7ZKoI5fDrbK7NzAI+0+AWoNO4yua1jZUmCAiASpxvbVoUxFU45D+oq1Sv/mNyDmbM0Queqapj+o8Ihzw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231012110022-883c3ab3-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":524141},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231012110022-883c3ab3-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/aef54e660cf00a224c66d807b6b2db91/blocksuite-virgo-0.0.0-20231012110022-883c3ab3-nightly.tgz","_integrity":"sha512-YbSKkjZzmqn98ZU9bWz+aTWn/PZwChempUBkWepZB0vOewFvkwZO0dnNOB+kRxwP3oqRlPoCKyu059qfwGIUhw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.0","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20231012110022-883c3ab3-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231012110022-883c3ab3-nightly_1697156609590_0.46957475204412136","host":"s3://npm-registry-packages"}},"0.0.0-20231013124600-0b50f15e-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231013124600-0b50f15e-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231013124600-0b50f15e-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"688aa595ad11f698cd29338dcf86bee426b42541","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231013124600-0b50f15e-nightly.tgz","fileCount":177,"integrity":"sha512-8myeBHc1ptvD3HM8nnOhDOOGEbLXKGdjzdufyfsMQ0PrwDdy5nSp5hUo2xGDxMA19zZMUJCbkZv5UsASoVsQtQ==","signatures":[{"sig":"MEYCIQDiMM1654ioVFthBAHhTLs4F9H0pmmpYz2aofYl2QjrUAIhAO/F5/B2lvbSLX1aVC3ALnI94lwMSfUATccPj3e2UR9h","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231013124600-0b50f15e-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":523831},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231013124600-0b50f15e-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/64829cb2eba02c43ab75790345665541/blocksuite-virgo-0.0.0-20231013124600-0b50f15e-nightly.tgz","_integrity":"sha512-8myeBHc1ptvD3HM8nnOhDOOGEbLXKGdjzdufyfsMQ0PrwDdy5nSp5hUo2xGDxMA19zZMUJCbkZv5UsASoVsQtQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.0","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20231013124600-0b50f15e-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231013124600-0b50f15e-nightly_1697242929194_0.33309663878431484","host":"s3://npm-registry-packages"}},"0.0.0-20231014135453-1634ecc4-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231014135453-1634ecc4-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231014135453-1634ecc4-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"976dd757cbbffa247f8f011cd72c933fcd9c18ab","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231014135453-1634ecc4-nightly.tgz","fileCount":177,"integrity":"sha512-BNSWzG/oI520aMXmJAkm8QrvryOBRk3rImjStHtRG+xtxjpLnZ42inLoM9egLv4tvRZtuRpMc0vCdC4jB7iKpw==","signatures":[{"sig":"MEQCIHSk0cvNqsjlCmTGIuuDcAlSnw7rXx7rCBi36TkPs+eeAiAkW59WOCf1TZeZft1g0fJ8mnPFEJAyBYy0C1ChX/RHEQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231014135453-1634ecc4-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":523831},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231014135453-1634ecc4-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/680960e2ecb15d0d4684044489ff9638/blocksuite-virgo-0.0.0-20231014135453-1634ecc4-nightly.tgz","_integrity":"sha512-BNSWzG/oI520aMXmJAkm8QrvryOBRk3rImjStHtRG+xtxjpLnZ42inLoM9egLv4tvRZtuRpMc0vCdC4jB7iKpw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.0","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20231014135453-1634ecc4-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231014135453-1634ecc4-nightly_1697329507840_0.7550289856717862","host":"s3://npm-registry-packages"}},"0.0.0-20231015121126-6b9061b8-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231015121126-6b9061b8-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231015121126-6b9061b8-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"222965b47494fdc2fa61f697a852c13f5f4226d6","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231015121126-6b9061b8-nightly.tgz","fileCount":177,"integrity":"sha512-q4NN2xsWO0jbIfsiJbhfuC6vGGnbGIKp0mhVjGh8NyyEijf2MhR7yeea4djZIP7q8GUz1AkgdznTnYBqcVxW6g==","signatures":[{"sig":"MEYCIQCraM72pBQuzlPst8a8nO0ltAElzs/Xgh8OoWs75le6CgIhANShLD1ZMFizfFLPhYe6ueUNx2yeoNkfSWOKc/fe8bA7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231015121126-6b9061b8-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":523831},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231015121126-6b9061b8-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/602d7e7ae0b02734af4913c960f845b8/blocksuite-virgo-0.0.0-20231015121126-6b9061b8-nightly.tgz","_integrity":"sha512-q4NN2xsWO0jbIfsiJbhfuC6vGGnbGIKp0mhVjGh8NyyEijf2MhR7yeea4djZIP7q8GUz1AkgdznTnYBqcVxW6g==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.0","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20231015121126-6b9061b8-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231015121126-6b9061b8-nightly_1697415900695_0.4475812441252469","host":"s3://npm-registry-packages"}},"0.0.0-20231016141032-bd16edf2-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231016141032-bd16edf2-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231016141032-bd16edf2-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"7bbf21378a5f0476ef4ad0795d515e03ff9a3261","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231016141032-bd16edf2-nightly.tgz","fileCount":177,"integrity":"sha512-74HsnFWaCVPAZRGPaaWuEefhEI71i026mH6DGfteXmAi12vApOnS8aYKTsxGE3n+UsKV5vGRoA0I8h6AuHEbsw==","signatures":[{"sig":"MEQCIGwaVbaPW6EfPMhaaMCTIb8FhG9UTjdPmpE16hF4VqBTAiA3RtyYCwuSDpNixxFeiFfLu4r0YK7IF/w7LOzSa/p7MA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231016141032-bd16edf2-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":523699},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231016141032-bd16edf2-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/376b2971f2a1203a127071312cb2d77d/blocksuite-virgo-0.0.0-20231016141032-bd16edf2-nightly.tgz","_integrity":"sha512-74HsnFWaCVPAZRGPaaWuEefhEI71i026mH6DGfteXmAi12vApOnS8aYKTsxGE3n+UsKV5vGRoA0I8h6AuHEbsw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.0","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20231016141032-bd16edf2-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231016141032-bd16edf2-nightly_1697502204208_0.23724416534680848","host":"s3://npm-registry-packages"}},"0.0.0-20231018002009-e1515f86-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231018002009-e1515f86-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231018002009-e1515f86-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"d60079629a5e18f1e58a7669404523539a4c2ece","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231018002009-e1515f86-nightly.tgz","fileCount":177,"integrity":"sha512-8IKMJVxPqb+3bA2N0tDdIlRWu+uHkj2qu78mk2C3Y7SkLYn0Hl4VsyzyuHZgR+tx5GzENpEgCL4WM8rzDP9q9A==","signatures":[{"sig":"MEYCIQCyKdYZ82E0o8hcBW8wSMQZxJCofKb5O1YeO4IWIycBaQIhAPI8BWzsX3TLNo/XOHiDDI/I6DlkAng5LhoqqqroceEI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231018002009-e1515f86-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":523699},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231018002009-e1515f86-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/63ea77c227f8c7f08312e119b046ab77/blocksuite-virgo-0.0.0-20231018002009-e1515f86-nightly.tgz","_integrity":"sha512-8IKMJVxPqb+3bA2N0tDdIlRWu+uHkj2qu78mk2C3Y7SkLYn0Hl4VsyzyuHZgR+tx5GzENpEgCL4WM8rzDP9q9A==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.0","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20231018002009-e1515f86-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231018002009-e1515f86-nightly_1697588666272_0.4510165155506516","host":"s3://npm-registry-packages"}},"0.0.0-20231018100009-361737d3-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231018100009-361737d3-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231018100009-361737d3-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"92c9f78e8a3b649c0b44e6bd8fa891de13d02472","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231018100009-361737d3-nightly.tgz","fileCount":177,"integrity":"sha512-A07yGChJLwGOekojgXL3wAR2+AL3WbyOyECj/I0oSpGvJf3uTYo2+swIGJEV6CgwxlhubH1GEqes2iyrWWvpAQ==","signatures":[{"sig":"MEUCIQCOdPJIRQeekgsQuiOBySVn3Dga0gn8yVMkRCIfbyp6OwIgIm8oyiN4+OeIPQQ9afu2herCPOAXEI4+yhrKXmoO3O0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231018100009-361737d3-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":523699},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231018100009-361737d3-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/e7e3cfe8e1f0f990864fd1313c38c7ed/blocksuite-virgo-0.0.0-20231018100009-361737d3-nightly.tgz","_integrity":"sha512-A07yGChJLwGOekojgXL3wAR2+AL3WbyOyECj/I0oSpGvJf3uTYo2+swIGJEV6CgwxlhubH1GEqes2iyrWWvpAQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20231018100009-361737d3-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231018100009-361737d3-nightly_1697624588696_0.7539279196371651","host":"s3://npm-registry-packages"}},"0.9.0":{"name":"@blocksuite/virgo","version":"0.9.0","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.9.0","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"1677ee0f22854904f152ac4946a158e7ae5a9930","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.9.0.tgz","fileCount":177,"integrity":"sha512-HHDfrTgUVMboDFtCph2EH/cgHNpJI3EXh/PVOorEVsQHUARu21bgpxPzW+9xEVLWhGBLlfg+Y9LsXkpqdtIbMQ==","signatures":[{"sig":"MEYCIQCjhoBgZJrxRpdm0J6whqTi0hIprLG5v8V2EFkScGMS9wIhAJyZq3f3AyUFe6T3nzqZ5wj23m1hIFQwA5Pph0u1sCBS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.9.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":523635},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.9.0.tgz","types":"dist/index.d.ts","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/35525ee7e3a50a6c4ed7aca0f1b6622b/blocksuite-virgo-0.9.0.tgz","_integrity":"sha512-HHDfrTgUVMboDFtCph2EH/cgHNpJI3EXh/PVOorEVsQHUARu21bgpxPzW+9xEVLWhGBLlfg+Y9LsXkpqdtIbMQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.0","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.9.0_1697632080193_0.23882437726047456","host":"s3://npm-registry-packages"}},"0.0.0-20231018165053-6a3da92f-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231018165053-6a3da92f-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231018165053-6a3da92f-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"b8a106f316cbac2ed724a35cab8f34dc455ab0bb","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231018165053-6a3da92f-nightly.tgz","fileCount":177,"integrity":"sha512-x3448fNAUu5LJfr6Yf+zpUhSjlMahgcDAILEdrvDeQ0UK03Fs2xCl9FTWhRjg2QwgGZvZeFyvtFlasXeQXO4lg==","signatures":[{"sig":"MEYCIQDTYAR734DahAgbO/4PLrxkOdWc4FVayki5bCnDbUq9gQIhAJJPDytLGX4lG6ljT89jXBorUA3VxMvkQvpsHT/gDgAw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231018165053-6a3da92f-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":523699},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231018165053-6a3da92f-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/4065a89eff4ded569bdbcb78b9a221d2/blocksuite-virgo-0.0.0-20231018165053-6a3da92f-nightly.tgz","_integrity":"sha512-x3448fNAUu5LJfr6Yf+zpUhSjlMahgcDAILEdrvDeQ0UK03Fs2xCl9FTWhRjg2QwgGZvZeFyvtFlasXeQXO4lg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20231018165053-6a3da92f-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231018165053-6a3da92f-nightly_1697675020478_0.0311984702806134","host":"s3://npm-registry-packages"}},"0.0.0-20231019112329-dbf10b07-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231019112329-dbf10b07-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231019112329-dbf10b07-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"2a9e388efbdfb687266469dbe4865bb756e1d437","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231019112329-dbf10b07-nightly.tgz","fileCount":177,"integrity":"sha512-qsaUsBFoQGCkq0Jo9uAd/347Htp1hbXswvg+M7hweGbsXnMbo69Nfzeovmv77xra78FmRCxUHiafmfBT+Qcm7w==","signatures":[{"sig":"MEUCIQD929k4M3Z0aJL6q1ArnGo+AA6PYfq88AUbIItGPav3IAIgU4+cgufmTcdmb0Bzr/+MzBMat3W9IQ5zAFIDtz1akqc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231019112329-dbf10b07-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":523699},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231019112329-dbf10b07-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/97ae0310def8d72b310a7d7b8992ee87/blocksuite-virgo-0.0.0-20231019112329-dbf10b07-nightly.tgz","_integrity":"sha512-qsaUsBFoQGCkq0Jo9uAd/347Htp1hbXswvg+M7hweGbsXnMbo69Nfzeovmv77xra78FmRCxUHiafmfBT+Qcm7w==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20231019112329-dbf10b07-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231019112329-dbf10b07-nightly_1697761425079_0.087824662755708","host":"s3://npm-registry-packages"}},"0.0.0-20231020080315-99dc51bc-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231020080315-99dc51bc-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231020080315-99dc51bc-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"106cada80a93c6e86e57750e1b31dfab11073098","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231020080315-99dc51bc-nightly.tgz","fileCount":177,"integrity":"sha512-4NPdQqtlP67fYjeKM7XB4bStUBftwKTDHH+VLjMLCPAGuRAfWnRRE3SV+2d6frnv7t119NOGwCEd1chSNBm+hA==","signatures":[{"sig":"MEQCIGmYZN42f05/ZAGLHxn8VLeVn+gl5NsCiC1scGHhquTeAiAfnpEUaHDqy+B9QDwcZcUMZYXjzX5iDoWxaOATGaeYWg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231020080315-99dc51bc-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":523699},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231020080315-99dc51bc-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/db7bb4413782f5325f48188fa68bd1fd/blocksuite-virgo-0.0.0-20231020080315-99dc51bc-nightly.tgz","_integrity":"sha512-4NPdQqtlP67fYjeKM7XB4bStUBftwKTDHH+VLjMLCPAGuRAfWnRRE3SV+2d6frnv7t119NOGwCEd1chSNBm+hA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20231020080315-99dc51bc-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231020080315-99dc51bc-nightly_1697847738123_0.8681537116655909","host":"s3://npm-registry-packages"}},"0.0.0-20231022183532-20d6f0fd-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231022183532-20d6f0fd-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231022183532-20d6f0fd-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"ecf2c17a760d5cafa38d139aac432e5069e242c0","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231022183532-20d6f0fd-nightly.tgz","fileCount":177,"integrity":"sha512-+eoB7bDCm+4PN8ua/EdEzwp9v3SWJy5EHk/NiU5kBM6O7d6wXePe4g4IIf46qis84ByPldIvkR9lg4i4RQALwQ==","signatures":[{"sig":"MEUCIQCln5EXzvF6BHWIiAjCuV+pWeGpbmMfp77X/mN4bHUmLAIge45EXjDui3qeaygtk4WusA+atO8PXhdK5GQurnLySrk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231022183532-20d6f0fd-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":523699},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231022183532-20d6f0fd-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/7966dcaa86827fb9d9704ce55da3b9b9/blocksuite-virgo-0.0.0-20231022183532-20d6f0fd-nightly.tgz","_integrity":"sha512-+eoB7bDCm+4PN8ua/EdEzwp9v3SWJy5EHk/NiU5kBM6O7d6wXePe4g4IIf46qis84ByPldIvkR9lg4i4RQALwQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20231022183532-20d6f0fd-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231022183532-20d6f0fd-nightly_1698020622770_0.75423480049826","host":"s3://npm-registry-packages"}},"0.0.0-20231023083139-15bc3fd0-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231023083139-15bc3fd0-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231023083139-15bc3fd0-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"322c171e63fdbbad2f9ed7afc0f72b09b4927ae4","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231023083139-15bc3fd0-nightly.tgz","fileCount":177,"integrity":"sha512-q3p1cFNhTcO12CBHaW8p/imXriUDMhVoriHULG+SsVlFx/t+aH5NxLnC9jvZpANDIyfTQSHhrZS9yf2Ut2zB8Q==","signatures":[{"sig":"MEYCIQCLNDsNM84E/dKzUvxFj8iSOZZOVL1kdMNuIgOEXro6DwIhAMFIyrYOUa+tNyFtpk1l2zTiIRLB0EOo3KJyZ5y8G1lQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231023083139-15bc3fd0-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":523699},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231023083139-15bc3fd0-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/1b253520cb88ac65358f5429dda01c9b/blocksuite-virgo-0.0.0-20231023083139-15bc3fd0-nightly.tgz","_integrity":"sha512-q3p1cFNhTcO12CBHaW8p/imXriUDMhVoriHULG+SsVlFx/t+aH5NxLnC9jvZpANDIyfTQSHhrZS9yf2Ut2zB8Q==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20231023083139-15bc3fd0-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231023083139-15bc3fd0-nightly_1698107036627_0.4568442095817695","host":"s3://npm-registry-packages"}},"0.0.0-20231024064721-2aee7119-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231024064721-2aee7119-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231024064721-2aee7119-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"0c2c793d6e7babc91aae196dba72364517bb0c52","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231024064721-2aee7119-nightly.tgz","fileCount":177,"integrity":"sha512-K39pA1KUSbVCLPmBtQ8ODuGiMU74rz0786fFzP/aqgUGammWx7ZAXn4ymb0E0XPKiNxrAnhShlwsUExkac71gQ==","signatures":[{"sig":"MEQCIGaolcETuoSXyjOeXs8zCLYIMf3vepGsV50ULKWESEmqAiAWvXE0Oeky5tk3pEjzJpMJePeRQU1ZozYnIgdy1WePjw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231024064721-2aee7119-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":523853},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231024064721-2aee7119-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/a64975c65b124696d4777f10d431ffbf/blocksuite-virgo-0.0.0-20231024064721-2aee7119-nightly.tgz","_integrity":"sha512-K39pA1KUSbVCLPmBtQ8ODuGiMU74rz0786fFzP/aqgUGammWx7ZAXn4ymb0E0XPKiNxrAnhShlwsUExkac71gQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20231024064721-2aee7119-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231024064721-2aee7119-nightly_1698131571890_0.29384298969653444","host":"s3://npm-registry-packages"}},"0.0.0-20231024175824-6ba0419a-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231024175824-6ba0419a-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231024175824-6ba0419a-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"5bfc51e1bd3b95bb2823bf5ef31124225916051a","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231024175824-6ba0419a-nightly.tgz","fileCount":177,"integrity":"sha512-Az5GfkBNqrfzxatwMe7SWtEnpds+C6tMVocALkNbahvOUWqCwmz8/0ptCVbcaUBomMTwbB50BVxj6klaUu6JvQ==","signatures":[{"sig":"MEYCIQCwgwqEgfTy65TWo4U3IiMzoOxWZ4MO21JfQ8EavJl4DAIhAPUZlZbQw948/ti+1bKef+LIrrFtPoGbptsbDiFptKJP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231024175824-6ba0419a-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":523204},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231024175824-6ba0419a-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/005f4adcbb6afc90df88c73e16cd63bb/blocksuite-virgo-0.0.0-20231024175824-6ba0419a-nightly.tgz","_integrity":"sha512-Az5GfkBNqrfzxatwMe7SWtEnpds+C6tMVocALkNbahvOUWqCwmz8/0ptCVbcaUBomMTwbB50BVxj6klaUu6JvQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20231024175824-6ba0419a-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231024175824-6ba0419a-nightly_1698193399033_0.8871286756372951","host":"s3://npm-registry-packages"}},"0.0.0-20231025234954-8769a7df-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231025234954-8769a7df-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231025234954-8769a7df-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"27f4734d763c650c19edf0e490a642ff4be00977","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231025234954-8769a7df-nightly.tgz","fileCount":177,"integrity":"sha512-wH5uPKMUTJmIClwaicTBMl5EYwykS3kvoU4eySB5WfuRM10w0HUzV2IrHxtDEuvJg/jeo9IoCVBuxidAP5SsAQ==","signatures":[{"sig":"MEQCIAiIjU1Kn9yd+9Nibuh/DoRes/TI1wbBT7oW+gVDVbZtAiBJeIzQ5S5LSW/5nfb8hQCIEGQvek12Cn0jZlM3rI7BiA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231025234954-8769a7df-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":523204},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231025234954-8769a7df-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/948ec4cb216a55fc89c528025303ab12/blocksuite-virgo-0.0.0-20231025234954-8769a7df-nightly.tgz","_integrity":"sha512-wH5uPKMUTJmIClwaicTBMl5EYwykS3kvoU4eySB5WfuRM10w0HUzV2IrHxtDEuvJg/jeo9IoCVBuxidAP5SsAQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20231025234954-8769a7df-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231025234954-8769a7df-nightly_1698279773388_0.29030174735146175","host":"s3://npm-registry-packages"}},"0.0.0-20231026145131-b75c6b54-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231026145131-b75c6b54-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231026145131-b75c6b54-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"499a36994e33bb092bcbfc96b420ed6ae4733add","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231026145131-b75c6b54-nightly.tgz","fileCount":177,"integrity":"sha512-28NHgnGipBvrca7x37Li74RZ2HCoW2VWqoPnZNDPv/axhLRL69Denl90hsfSvhlwJVNmQKbLTEH050VCwqCkqA==","signatures":[{"sig":"MEUCIDUVjPm4cGibFWtEVR0m923vEW3V7WVT18bxKjonU3WYAiEA3HY2mcf+sB+9hAaV3suyDthhrcnCvoUhIVTcMVRwLz8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231026145131-b75c6b54-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":523204},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231026145131-b75c6b54-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/23fb091bf1bd8ff2c0594bcf94308489/blocksuite-virgo-0.0.0-20231026145131-b75c6b54-nightly.tgz","_integrity":"sha512-28NHgnGipBvrca7x37Li74RZ2HCoW2VWqoPnZNDPv/axhLRL69Denl90hsfSvhlwJVNmQKbLTEH050VCwqCkqA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20231026145131-b75c6b54-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231026145131-b75c6b54-nightly_1698366185388_0.3705624305551636","host":"s3://npm-registry-packages"}},"0.0.0-20231027071653-5f50691f-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231027071653-5f50691f-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231027071653-5f50691f-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"6443e1f59b4b36d16b539d2ff5dbb62143ce3cc0","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231027071653-5f50691f-nightly.tgz","fileCount":177,"integrity":"sha512-ojTnIWcs2fDcG0j1duR2JIxdZlRw6DXzE1t0SJQBr9OLGcpDRYPtWzadoAvb2Xo6mLAjRL+IH0PPkxH2ktHA5g==","signatures":[{"sig":"MEUCIH9HYUnh4HrS0+pwc86Lu05dgds/SjHue1dtl/8tLAzUAiEAwF7aH1i0F6GmZnGHp6UlAYNPTggSERYUZxZICJ10kGw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231027071653-5f50691f-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":523204},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231027071653-5f50691f-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/b615e6f092f402a3f4af08c99d6792d9/blocksuite-virgo-0.0.0-20231027071653-5f50691f-nightly.tgz","_integrity":"sha512-ojTnIWcs2fDcG0j1duR2JIxdZlRw6DXzE1t0SJQBr9OLGcpDRYPtWzadoAvb2Xo6mLAjRL+IH0PPkxH2ktHA5g==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20231027071653-5f50691f-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231027071653-5f50691f-nightly_1698452557037_0.3134532034575266","host":"s3://npm-registry-packages"}},"0.0.0-20231028125236-5a17e2a0-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231028125236-5a17e2a0-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231028125236-5a17e2a0-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"c0d33628a3d6252fbb5936df6749c9829ff4d982","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231028125236-5a17e2a0-nightly.tgz","fileCount":177,"integrity":"sha512-U0YAt7pwEvBPpJEUTrsJ4M1/oDYkvt8WFoGhN54+VTVcpVJaNeUTNxId6x9OiTMBs/JbEG7aS9aHL+TnioPNag==","signatures":[{"sig":"MEYCIQCo8EO0/XsnQWuQXYMsjvot4dNg+2+C96xcc3d3pCXoiAIhAJiYdYpU0uRlBIlz4VZQhKljQSr+eOzKtHjqTC7tLwJg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231028125236-5a17e2a0-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":523204},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231028125236-5a17e2a0-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/b81ba0a0b80f3b11aa374bf390fc03a8/blocksuite-virgo-0.0.0-20231028125236-5a17e2a0-nightly.tgz","_integrity":"sha512-U0YAt7pwEvBPpJEUTrsJ4M1/oDYkvt8WFoGhN54+VTVcpVJaNeUTNxId6x9OiTMBs/JbEG7aS9aHL+TnioPNag==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20231028125236-5a17e2a0-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231028125236-5a17e2a0-nightly_1698539093360_0.4047752811478933","host":"s3://npm-registry-packages"}},"0.0.0-20231029025237-f8b04fc9-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231029025237-f8b04fc9-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231029025237-f8b04fc9-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"f0ee08d45a43a74d32346ac3239c37072532990f","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231029025237-f8b04fc9-nightly.tgz","fileCount":177,"integrity":"sha512-SPTung30t1YOIF2F8eEwdcB3Sq3nXggNW6N4TGQWRXWzcIPRSAEqN8tFaMcRn+00zXJ0v542tthjEV0RNWYPdA==","signatures":[{"sig":"MEUCIQCc9zgr85r+QhAnUd3moAHeBzFx2REppp8Ta107FntrcgIgU5tXkwAO71cUWeLOnKrMTOrnXUGHL/zQNsq19r+psyE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231029025237-f8b04fc9-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":523204},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231029025237-f8b04fc9-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/4f39418bd7f70d5bf7f3bf676bf34c03/blocksuite-virgo-0.0.0-20231029025237-f8b04fc9-nightly.tgz","_integrity":"sha512-SPTung30t1YOIF2F8eEwdcB3Sq3nXggNW6N4TGQWRXWzcIPRSAEqN8tFaMcRn+00zXJ0v542tthjEV0RNWYPdA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20231029025237-f8b04fc9-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231029025237-f8b04fc9-nightly_1698625448768_0.8350016866254288","host":"s3://npm-registry-packages"}},"0.0.0-20231030231216-032babdc-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231030231216-032babdc-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231030231216-032babdc-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"49232c5d537d81c52a6136f4ebcf685d44c49001","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231030231216-032babdc-nightly.tgz","fileCount":177,"integrity":"sha512-h/bSJUlKytyP9YpBknSWxzJPipX7QKFiF1AoZM/HfqqvZqvjZ0YGNlxCjieLlH/o/SrzfuxaO4yGoVvdHVWukQ==","signatures":[{"sig":"MEUCIQCpuIRMybI+iMbQwkaMo++rJXCIa3pXSQcAiWmaVqUalQIgKlh04O5uzsGTWaS8tklZNk2hOJaupCFVd+QD3tcbxwc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231030231216-032babdc-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":523204},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231030231216-032babdc-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/f7ddc58642721555be55f159967bec4f/blocksuite-virgo-0.0.0-20231030231216-032babdc-nightly.tgz","_integrity":"sha512-h/bSJUlKytyP9YpBknSWxzJPipX7QKFiF1AoZM/HfqqvZqvjZ0YGNlxCjieLlH/o/SrzfuxaO4yGoVvdHVWukQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20231030231216-032babdc-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231030231216-032babdc-nightly_1698711802324_0.6471627716419075","host":"s3://npm-registry-packages"}},"0.0.0-20231031082416-924fb688-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231031082416-924fb688-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231031082416-924fb688-nightly","maintainers":[{"name":"himself_65","email":"himself65@outlook.com"},{"name":"wangzuomeng","email":"wxlxinglong@outlook.com"},{"name":"colel","email":"cole@colelawrence.com"},{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"46ec3b865e9c65775d8bb8aa9aeb1afa8a1541c5","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231031082416-924fb688-nightly.tgz","fileCount":177,"integrity":"sha512-Ye172LfN7QTgMxnDkJ2do2/gSSqOzD3fMeWtYtFPxiwiIZWWcfC7k/MughRzIlF1rewbQPFqlB1OEWJMWbTouQ==","signatures":[{"sig":"MEUCIFw9XVCgbJFc6gtpJcQnmJzvrsrIJcfMT+BN8tcWOhHHAiEAy1ildz8aNdFdvKYcrcqwwKNnOW3HuPXratKiBcM10DA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231031082416-924fb688-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":523344},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231031082416-924fb688-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/aba3b5ec6aaf00a4e59ef557e29ad202/blocksuite-virgo-0.0.0-20231031082416-924fb688-nightly.tgz","_integrity":"sha512-Ye172LfN7QTgMxnDkJ2do2/gSSqOzD3fMeWtYtFPxiwiIZWWcfC7k/MughRzIlF1rewbQPFqlB1OEWJMWbTouQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20231031082416-924fb688-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231031082416-924fb688-nightly_1698798349204_0.11339999865046169","host":"s3://npm-registry-packages"}},"0.0.0-20231101080734-aa27dc89-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231101080734-aa27dc89-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231101080734-aa27dc89-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"d1c2a71868eec6c38f732bd733bfc26eec1e1f9a","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231101080734-aa27dc89-nightly.tgz","fileCount":177,"integrity":"sha512-O9CkkWVFMCxyIi2z79h50isv24j93MLOMQczzHe4QfXXJ2GIzxLUpk5awS9SCBrhkRcff5MBhytCJbUtkufqTA==","signatures":[{"sig":"MEUCIGUEjxcErdDJBEFck0UtsyEALxZkZne+/lhoFMLq4IHIAiEA+NUteyDwNoKz8SyYykhTo90oa8sJNf1fQ/ZSh9ql1vk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231101080734-aa27dc89-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":523344},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231101080734-aa27dc89-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/0f73d39bf2839067e6b2508654fc67f7/blocksuite-virgo-0.0.0-20231101080734-aa27dc89-nightly.tgz","_integrity":"sha512-O9CkkWVFMCxyIi2z79h50isv24j93MLOMQczzHe4QfXXJ2GIzxLUpk5awS9SCBrhkRcff5MBhytCJbUtkufqTA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20231101080734-aa27dc89-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231101080734-aa27dc89-nightly_1698826761607_0.4260051868773551","host":"s3://npm-registry-packages"}},"0.0.0-20231102101259-8b6138c0-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231102101259-8b6138c0-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231102101259-8b6138c0-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"f21d76c6713181726dbfabdac87f1479783520a1","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231102101259-8b6138c0-nightly.tgz","fileCount":177,"integrity":"sha512-5TYMztwTbBDIkuwB4feFtfk7F4c5HC7mpJsaXum5EATAor2JCNEGdeKPTPrxOv6Xhr0YgrWnzZPM/rcNKzadog==","signatures":[{"sig":"MEQCIAvBEbJVIyGv+cBratOmdW35BPglpq/J8gpyn6Y7qo6bAiAGXaDOCakIRbbcqXbMmoTjziR8wzP6OolLlEl/1d1yYw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231102101259-8b6138c0-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":523344},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231102101259-8b6138c0-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/c8dcd27678059af709291380e41f7bde/blocksuite-virgo-0.0.0-20231102101259-8b6138c0-nightly.tgz","_integrity":"sha512-5TYMztwTbBDIkuwB4feFtfk7F4c5HC7mpJsaXum5EATAor2JCNEGdeKPTPrxOv6Xhr0YgrWnzZPM/rcNKzadog==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20231102101259-8b6138c0-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231102101259-8b6138c0-nightly_1698970985158_0.2794524353634982","host":"s3://npm-registry-packages"}},"0.0.0-20231103104910-0eeee58c-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231103104910-0eeee58c-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231103104910-0eeee58c-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"71ee7505b5b8d7cfa201188832b31655e86151fb","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231103104910-0eeee58c-nightly.tgz","fileCount":177,"integrity":"sha512-5Cy73vMRTazD9sq+cQhLMFgxBI8RR+zFWzg5s5TC7Tmyzo4mV5PQjitbKt355Qi9qvQ3irxflQZlhi3IBYuATw==","signatures":[{"sig":"MEQCIGMC3WWdLZ+kASzGViN01sBudLJN8vpxFrDrtL2b0wsmAiBgx4QSl4WV4FyQ3IkVRFH30ywL8Dy0tcR/sU05S4nmyw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231103104910-0eeee58c-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":523344},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231103104910-0eeee58c-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/83622caa20726cca11ef81427e7d8b55/blocksuite-virgo-0.0.0-20231103104910-0eeee58c-nightly.tgz","_integrity":"sha512-5Cy73vMRTazD9sq+cQhLMFgxBI8RR+zFWzg5s5TC7Tmyzo4mV5PQjitbKt355Qi9qvQ3irxflQZlhi3IBYuATw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20231103104910-0eeee58c-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231103104910-0eeee58c-nightly_1699057361353_0.5920931772317535","host":"s3://npm-registry-packages"}},"0.0.0-20231106121401-6279980b-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231106121401-6279980b-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231106121401-6279980b-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"0aa57212b8370e57d65fbaae27e4b8fd349d27d8","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231106121401-6279980b-nightly.tgz","fileCount":177,"integrity":"sha512-5Ii4ENOGbgMoXX4r8jz4VXlF5vRHo2e5HTFtSuQ9z/Q5vP5Dx6SgjTkYxNNaNMfCEX4WhzwDe/0zo5ql3vCrVg==","signatures":[{"sig":"MEQCIBrqW95fRqnQbkGeNYlxODALs3+Eau0RtTM+yls2RK3yAiA5vUGFgm14rslzQfF9xKvs7E/kRnqxsfipTT0gXhZN/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231106121401-6279980b-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":523344},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231106121401-6279980b-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/cd95abcd784ac9799ae2366965957a6f/blocksuite-virgo-0.0.0-20231106121401-6279980b-nightly.tgz","_integrity":"sha512-5Ii4ENOGbgMoXX4r8jz4VXlF5vRHo2e5HTFtSuQ9z/Q5vP5Dx6SgjTkYxNNaNMfCEX4WhzwDe/0zo5ql3vCrVg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.2","@blocksuite/global":"0.0.0-20231106121401-6279980b-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^2.8.0","yjs":"^13.6.7"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231106121401-6279980b-nightly_1699316589342_0.16056213893763838","host":"s3://npm-registry-packages"}},"0.0.0-20231107050554-2f248df8-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231107050554-2f248df8-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231107050554-2f248df8-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"70b05e9cf11c155e7513b851508c32555d4824e4","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231107050554-2f248df8-nightly.tgz","fileCount":177,"integrity":"sha512-eYRPDz4g7VnaPFFdivdd42/UiCSiIpstMuJPJFumnnO+OI6V//jgQjEjexxJeaZUEa2vATMRMVE894XWWfHtzw==","signatures":[{"sig":"MEQCIGuFM3MtxbiUGfhYPOTri1yZSaWswVu8rJ+01vlSdgUdAiAxz//3ms/tX81dWX8jq4Ysqoe+8mWSVcD2DFeAI8fq6A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231107050554-2f248df8-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":532557},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231107050554-2f248df8-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/bba4862ad66a09209af92626c21f8941/blocksuite-virgo-0.0.0-20231107050554-2f248df8-nightly.tgz","_integrity":"sha512-eYRPDz4g7VnaPFFdivdd42/UiCSiIpstMuJPJFumnnO+OI6V//jgQjEjexxJeaZUEa2vATMRMVE894XWWfHtzw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231107050554-2f248df8-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231107050554-2f248df8-nightly_1699340860696_0.28674177204114915","host":"s3://npm-registry-packages"}},"0.0.0-20231107092420-e84d1d44-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231107092420-e84d1d44-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231107092420-e84d1d44-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"e13a26cde6d95fe0f89e03ef46ac61a90b255876","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231107092420-e84d1d44-nightly.tgz","fileCount":177,"integrity":"sha512-EwN9svZCNZCVgERcCIqd1AoKQbtaR0mZxSKRXEX9Gek8IHJ/E8ldf6wbHq7KtGxzKNrU49nCnkoDBWv6ZHwfNA==","signatures":[{"sig":"MEQCIArKPg9oOEI1kt4xZze9U7OoEgqb383iYWi1H++zVkXNAiBFLG0xH6wH/X1x0FMmuT8xDIBraUjS8RxWrM1KkxBdkA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231107092420-e84d1d44-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":532557},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231107092420-e84d1d44-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/6c936da3a3dfcd2b390bf3ad3a14af82/blocksuite-virgo-0.0.0-20231107092420-e84d1d44-nightly.tgz","_integrity":"sha512-EwN9svZCNZCVgERcCIqd1AoKQbtaR0mZxSKRXEX9Gek8IHJ/E8ldf6wbHq7KtGxzKNrU49nCnkoDBWv6ZHwfNA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231107092420-e84d1d44-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231107092420-e84d1d44-nightly_1699350480895_0.738239789878071","host":"s3://npm-registry-packages"}},"0.0.0-20231107102720-d68b393d-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231107102720-d68b393d-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231107102720-d68b393d-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"5cdf669490952bc85d46c965bf227ecf91fb5676","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231107102720-d68b393d-nightly.tgz","fileCount":177,"integrity":"sha512-ghzzY80CGpmFhqAq5ZJTTbgpRnGUmtaTmfwPqboXB88ajmjURbsTRnxifrM5waeTcaxt8pNUuD8P1uUq46oGBg==","signatures":[{"sig":"MEUCIAdf6TBpR+6/Mv8Tlw4AUsy3e2ALHLcE6CpTrCczL8SKAiEAwYF1IHC4okQMGbNLY59YTe8z6A/k5Dxi3cycbmcGTJI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231107102720-d68b393d-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":532557},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231107102720-d68b393d-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/43a81db1dc359ca737366f53d305ef1c/blocksuite-virgo-0.0.0-20231107102720-d68b393d-nightly.tgz","_integrity":"sha512-ghzzY80CGpmFhqAq5ZJTTbgpRnGUmtaTmfwPqboXB88ajmjURbsTRnxifrM5waeTcaxt8pNUuD8P1uUq46oGBg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231107102720-d68b393d-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231107102720-d68b393d-nightly_1699355052648_0.5855608801904935","host":"s3://npm-registry-packages"}},"0.0.0-20231108022924-723cee6b-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231108022924-723cee6b-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231108022924-723cee6b-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"e12b3d93cb09897e91188323063e552ee75984c6","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231108022924-723cee6b-nightly.tgz","fileCount":177,"integrity":"sha512-DtRQWTDS9SQwIC8KoJMx377qdqiLs83BbWCNpalmU7t9enhlVEqOfKtiHHFENUGXBezqirsiPDxTxkX3x32eUw==","signatures":[{"sig":"MEUCIFrd1I+oXoqozw0sMUOu9MEO26nYBZtF7HTG9V5c+9i+AiEAqiYK96rOSLgTT75ESBAKemTzRNbbHgw5lKyCeDyg+h8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231108022924-723cee6b-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":532557},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231108022924-723cee6b-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/6811288d226a19b6c32e24147a32b728/blocksuite-virgo-0.0.0-20231108022924-723cee6b-nightly.tgz","_integrity":"sha512-DtRQWTDS9SQwIC8KoJMx377qdqiLs83BbWCNpalmU7t9enhlVEqOfKtiHHFENUGXBezqirsiPDxTxkX3x32eUw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231108022924-723cee6b-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231108022924-723cee6b-nightly_1699410696056_0.25368987052949277","host":"s3://npm-registry-packages"}},"0.0.0-20231108035505-d0c8e35f-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231108035505-d0c8e35f-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231108035505-d0c8e35f-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"930981f99a23f3d2f079e15f248eae592be15980","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231108035505-d0c8e35f-nightly.tgz","fileCount":177,"integrity":"sha512-9IKNsTyvkbLx4BAn6AEm92PlCcep3YcRki4TU8fBdC1zXucJoD4/E16fJ5faNGIduxmIdg98xEhZPbcGT1NxpA==","signatures":[{"sig":"MEUCIElrKHLJRHoPKOxqFWQgIAb2sfU2qS9GybZG6S45cC4RAiEA6JA7DiOCRjlkQPpCptwHui0FmE/iKRqaPsIHcjVptic=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231108035505-d0c8e35f-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":532557},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231108035505-d0c8e35f-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/f848ffb04a2353d5d4eeb401aad75961/blocksuite-virgo-0.0.0-20231108035505-d0c8e35f-nightly.tgz","_integrity":"sha512-9IKNsTyvkbLx4BAn6AEm92PlCcep3YcRki4TU8fBdC1zXucJoD4/E16fJ5faNGIduxmIdg98xEhZPbcGT1NxpA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231108035505-d0c8e35f-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^2.7","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231108035505-d0c8e35f-nightly_1699415866397_0.49120018292636347","host":"s3://npm-registry-packages"}},"0.0.0-20231108041746-2e7e3467-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231108041746-2e7e3467-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231108041746-2e7e3467-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"9ed44cd44888395eed4b60c614effa72ea096662","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231108041746-2e7e3467-nightly.tgz","fileCount":177,"integrity":"sha512-gRlb8cn49x9hUcBDbXSA5jFO2UWis4ZrZqCpWAXMcENyQnBscZnWyE52wt7h5KxXz113KUeUvCDvZcEBWlcFng==","signatures":[{"sig":"MEYCIQC6ojph72HDvGBTifsgycvBlRw87JQLMYF1UUTl3EVebQIhAPuxIt2EBSMWRbrib10/sp+zw23qhT8Nu5jOUVPN4P69","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231108041746-2e7e3467-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":532559},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231108041746-2e7e3467-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/278a57ab683b767d7f0fa044d9e9cdf4/blocksuite-virgo-0.0.0-20231108041746-2e7e3467-nightly.tgz","_integrity":"sha512-gRlb8cn49x9hUcBDbXSA5jFO2UWis4ZrZqCpWAXMcENyQnBscZnWyE52wt7h5KxXz113KUeUvCDvZcEBWlcFng==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231108041746-2e7e3467-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231108041746-2e7e3467-nightly_1699417253585_0.7647995392021976","host":"s3://npm-registry-packages"}},"0.0.0-20231108075905-8775a0ef-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231108075905-8775a0ef-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231108075905-8775a0ef-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"1da7990451f5b229785c175314ef89283989329e","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231108075905-8775a0ef-nightly.tgz","fileCount":177,"integrity":"sha512-vuuiH/XH011BrsD7a5hzWiYA7x2gwtcKXpv3bKE9G5FjpYbYLDRnrhs8bRN+PTsp74mG0IH4gy6XvYCN7wEsTw==","signatures":[{"sig":"MEUCIBiHW3aipSDIQGKg19FXBAoxmS14abUlXjYazFPCcrR5AiEAp2t0czVXtmQ5iSAwb+8CXQ2rOm11nhWPm/kg/boaZUk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231108075905-8775a0ef-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":532559},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231108075905-8775a0ef-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/4c759972882b546f048f01808dc4c384/blocksuite-virgo-0.0.0-20231108075905-8775a0ef-nightly.tgz","_integrity":"sha512-vuuiH/XH011BrsD7a5hzWiYA7x2gwtcKXpv3bKE9G5FjpYbYLDRnrhs8bRN+PTsp74mG0IH4gy6XvYCN7wEsTw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231108075905-8775a0ef-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231108075905-8775a0ef-nightly_1699430724302_0.9499183274107779","host":"s3://npm-registry-packages"}},"0.0.0-20231108134311-9db4ffd4-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231108134311-9db4ffd4-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231108134311-9db4ffd4-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"f39525d8ed12bfa6c3e6fa35e58373f0e8c8cdfb","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231108134311-9db4ffd4-nightly.tgz","fileCount":177,"integrity":"sha512-EHxuTTLJVXdqS7iJVG8ztkua/ybUisiZ41hcwnO8fcV02tYuF/wCLbvZ2h+Hq/GQlpnJsaQsWwA/zKc+68GeEw==","signatures":[{"sig":"MEYCIQCJarNXUrQ1wdPNFHiW46+8gjIwsrEo2fANP9B3t298OQIhAOOks1n+vD0lJiME4hpxNFd6cNsyQwNKbbEgwJbqNi8Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231108134311-9db4ffd4-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":532559},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231108134311-9db4ffd4-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/6d9a7f01919dae314ef17cd80396c3bd/blocksuite-virgo-0.0.0-20231108134311-9db4ffd4-nightly.tgz","_integrity":"sha512-EHxuTTLJVXdqS7iJVG8ztkua/ybUisiZ41hcwnO8fcV02tYuF/wCLbvZ2h+Hq/GQlpnJsaQsWwA/zKc+68GeEw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231108134311-9db4ffd4-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231108134311-9db4ffd4-nightly_1699489403514_0.9609755333658463","host":"s3://npm-registry-packages"}},"0.0.0-20231109020257-c0ea9c49-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231109020257-c0ea9c49-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231109020257-c0ea9c49-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"804c0752e8972510b83351acd741670b5f5044c0","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231109020257-c0ea9c49-nightly.tgz","fileCount":177,"integrity":"sha512-Gr15tY9IlHdV1GlLKl0T0klQMToBYX19csv/Y4nKPbWCwTBvLe2AJaoIwclN/ANCwzjdrYIYRIxx36JvhW9GcQ==","signatures":[{"sig":"MEYCIQCm7oni1NPGIzXifIK2R63EzFy4BiKPbpPKVFfe2qDf2QIhAPjpwmWlA/MHc/0bhyhrL8W3UX2y3uWR50UzyfdmNtDU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231109020257-c0ea9c49-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":532559},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231109020257-c0ea9c49-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/87d7c7862a694efbf1d37d8e9c877464/blocksuite-virgo-0.0.0-20231109020257-c0ea9c49-nightly.tgz","_integrity":"sha512-Gr15tY9IlHdV1GlLKl0T0klQMToBYX19csv/Y4nKPbWCwTBvLe2AJaoIwclN/ANCwzjdrYIYRIxx36JvhW9GcQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231109020257-c0ea9c49-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231109020257-c0ea9c49-nightly_1699501526687_0.862028546702581","host":"s3://npm-registry-packages"}},"0.0.0-20231110021850-52cfc795-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231110021850-52cfc795-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231110021850-52cfc795-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"db30fa22bb476cf7341c14792985b229861341cf","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231110021850-52cfc795-nightly.tgz","fileCount":178,"integrity":"sha512-a3mhAGQwCbS1uWI080QjrtcuPjMS2vTJSQoY0+BGxK+uihdSBtHnwhEmfz18sUCP8oigHaYE4tlmyVQhnp0xvA==","signatures":[{"sig":"MEUCIAuK1cdaC7R/GPLJ5qnh3sG7o9tZaljO0ngJNhL8FzPNAiEA+AtJ7XCkbbYydG5CzTwWugu/K2/sVcaAzeeSK2SlLDw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231110021850-52cfc795-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":532639},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231110021850-52cfc795-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/68930a97493c9c5de3661edef25ac657/blocksuite-virgo-0.0.0-20231110021850-52cfc795-nightly.tgz","_integrity":"sha512-a3mhAGQwCbS1uWI080QjrtcuPjMS2vTJSQoY0+BGxK+uihdSBtHnwhEmfz18sUCP8oigHaYE4tlmyVQhnp0xvA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231110021850-52cfc795-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231110021850-52cfc795-nightly_1699582895593_0.007191307124344792","host":"s3://npm-registry-packages"}},"0.0.0-20231110042432-4fdac4dc-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231110042432-4fdac4dc-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231110042432-4fdac4dc-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"b384ff8ba27f02a40aee7855ea448ebded602635","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231110042432-4fdac4dc-nightly.tgz","fileCount":178,"integrity":"sha512-9V7GNSC/eF6FM/+t3y8K0hODo2kJs6zOIWP2z9nb52+sRrV/+Zg6sllmWQ23xKtea3LQLBpf0eVo9yLD91KCeg==","signatures":[{"sig":"MEUCICM8EbIvwhSsM21beCOUzGavRUVMUlUD3HBfO1cykdEjAiEAvaTUhbkr+82fc7Mi7iLIW13RupMHzVTBEFufU+s29Ms=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231110042432-4fdac4dc-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":532639},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231110042432-4fdac4dc-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/8e14122dab91e3cebcba3d51965bfbfd/blocksuite-virgo-0.0.0-20231110042432-4fdac4dc-nightly.tgz","_integrity":"sha512-9V7GNSC/eF6FM/+t3y8K0hODo2kJs6zOIWP2z9nb52+sRrV/+Zg6sllmWQ23xKtea3LQLBpf0eVo9yLD91KCeg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231110042432-4fdac4dc-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231110042432-4fdac4dc-nightly_1699590974506_0.5883942473324089","host":"s3://npm-registry-packages"}},"0.0.0-20231110114546-e826a529-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231110114546-e826a529-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231110114546-e826a529-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"2bd9b3a1ebefee3a01ce9849a7f28eaa228cc758","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231110114546-e826a529-nightly.tgz","fileCount":178,"integrity":"sha512-7WWm/XjUwpxBXvp6/Ks0EBlgUiWbBtTim53KDGVKqs4lL08H3EjKZjtbrifVclTOD4bd3J3akYuewzrsqYnLaA==","signatures":[{"sig":"MEUCIQCAe2vV33bQMHMq7lrODelN0QZR8OkO5eDvuuMvGqwnHwIgUD0flF9zBWt8RMrvOFUvVvabduKZcQSex5w2oVkKJMc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231110114546-e826a529-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":532639},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231110114546-e826a529-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/9a1bfdd5140866e6acad2a5ec95f033d/blocksuite-virgo-0.0.0-20231110114546-e826a529-nightly.tgz","_integrity":"sha512-7WWm/XjUwpxBXvp6/Ks0EBlgUiWbBtTim53KDGVKqs4lL08H3EjKZjtbrifVclTOD4bd3J3akYuewzrsqYnLaA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231110114546-e826a529-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231110114546-e826a529-nightly_1699662162495_0.45930485551650135","host":"s3://npm-registry-packages"}},"0.0.0-20231111160253-ac6d1710-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231111160253-ac6d1710-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231111160253-ac6d1710-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"53a403a4424c8e5ae1e28f81cbb032b44a2abf27","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231111160253-ac6d1710-nightly.tgz","fileCount":178,"integrity":"sha512-0oCuWRMUWhf16Iqj+dWg9Rv2AARtxWXFczLoIh/lwq1nE1EIIh2KfdjoZm+y29OEwTkS7r5OEl1elBi/sD1d6Q==","signatures":[{"sig":"MEUCIQDd4wKOF/pJP+T1LJHhKBgLr6J+lAIWretHtdpnJEU0OwIgAWViFOv10j+CVar6mDV8MVMEvLI4uFyogoaXryaZRfs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231111160253-ac6d1710-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":532639},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231111160253-ac6d1710-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/337c688abc5c9c636612a829b8e615dc/blocksuite-virgo-0.0.0-20231111160253-ac6d1710-nightly.tgz","_integrity":"sha512-0oCuWRMUWhf16Iqj+dWg9Rv2AARtxWXFczLoIh/lwq1nE1EIIh2KfdjoZm+y29OEwTkS7r5OEl1elBi/sD1d6Q==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231111160253-ac6d1710-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231111160253-ac6d1710-nightly_1699748711338_0.19051862013749554","host":"s3://npm-registry-packages"}},"0.0.0-20231112150507-eef76a5b-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231112150507-eef76a5b-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231112150507-eef76a5b-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"7f10f975ec76d1479999373149d61a8670c75fc0","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231112150507-eef76a5b-nightly.tgz","fileCount":178,"integrity":"sha512-jr7vUXC5fgwzmQ7q3ghW10D08Qx7/Eg5IIBVKe/Ih1PozKPYdd65Y9q6Had2JLT41Dad6xpxxkbWj5wiMb10qA==","signatures":[{"sig":"MEUCIQCjgvWo07RsM0prAm2g1KfiZ9t5lLVH8KBH27tvvDIIFgIgBDMVeQZSlB4qtIzRx1scjedG65dY2DQQjNYWzMTC674=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231112150507-eef76a5b-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":532639},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231112150507-eef76a5b-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/a66cddf46a8a296be00f083ced6a4952/blocksuite-virgo-0.0.0-20231112150507-eef76a5b-nightly.tgz","_integrity":"sha512-jr7vUXC5fgwzmQ7q3ghW10D08Qx7/Eg5IIBVKe/Ih1PozKPYdd65Y9q6Had2JLT41Dad6xpxxkbWj5wiMb10qA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231112150507-eef76a5b-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231112150507-eef76a5b-nightly_1699835077144_0.9495080390630231","host":"s3://npm-registry-packages"}},"0.0.0-20231113111359-0c7eb06d-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231113111359-0c7eb06d-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231113111359-0c7eb06d-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"ee078da8c5f4f9c29cda542854e89e6de9c9e013","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231113111359-0c7eb06d-nightly.tgz","fileCount":178,"integrity":"sha512-YYCVCnQWvyONQM34BLMLht6DnYb18wOfGIhcErJBC1HoPjWuPDDaUqsQ+/vNF9tj54uM+6VNj75l+CnGtQum1A==","signatures":[{"sig":"MEQCICaJ7VRfZOWir0VCK1kkkLCxWL6nFdunzG6mPt83lmIlAiBekV8GwJ+QdUnBNOdUdeqMc4ZZdvXPYsmr/pLS83Tq5g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231113111359-0c7eb06d-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":532639},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231113111359-0c7eb06d-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/d6ac311f025fe6d5c9702c3be56bf697/blocksuite-virgo-0.0.0-20231113111359-0c7eb06d-nightly.tgz","_integrity":"sha512-YYCVCnQWvyONQM34BLMLht6DnYb18wOfGIhcErJBC1HoPjWuPDDaUqsQ+/vNF9tj54uM+6VNj75l+CnGtQum1A==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231113111359-0c7eb06d-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231113111359-0c7eb06d-nightly_1699921415704_0.40950620256460035","host":"s3://npm-registry-packages"}},"0.0.0-20231114212812-9faee00d-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231114212812-9faee00d-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231114212812-9faee00d-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"7e050e6665a6644732e3121f903bfeb551783582","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231114212812-9faee00d-nightly.tgz","fileCount":178,"integrity":"sha512-yiZmYCbPYAMKVMffwfr/SM9CX9tVY77+IoXK7zJhXvgrUrJwkkzfgUtiUVLvWUSsGMq6hwb1d38TPG2NlBwYXg==","signatures":[{"sig":"MEYCIQDQNSU2BEOxdojAqZ+iRcNMo/6+OtXKoVtNcqy11Ao8MAIhAItUdICeyx9oWEqEzg/ZQXMkcx2R7XomBeHJRN8EM5sp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231114212812-9faee00d-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":532639},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231114212812-9faee00d-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/8e08553795ee633a1a7fc09edeb5c643/blocksuite-virgo-0.0.0-20231114212812-9faee00d-nightly.tgz","_integrity":"sha512-yiZmYCbPYAMKVMffwfr/SM9CX9tVY77+IoXK7zJhXvgrUrJwkkzfgUtiUVLvWUSsGMq6hwb1d38TPG2NlBwYXg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231114212812-9faee00d-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231114212812-9faee00d-nightly_1700007831905_0.11571976153169161","host":"s3://npm-registry-packages"}},"0.0.0-20231116001525-613c4578-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231116001525-613c4578-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231116001525-613c4578-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"d05a761c7b6ee707c04aca0891bb71ae88d18265","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231116001525-613c4578-nightly.tgz","fileCount":178,"integrity":"sha512-IE5cKfLi0VU2KgY08Tf4OjlIu3/D2PQmilKaA1Ba5qvB4cwI7vKZbfpI6+AqZRIkkZxsdlsYPX+bTCn1EgK/3Q==","signatures":[{"sig":"MEUCIBIjgwDyP2Cgo1kMbZuLgiWh/lCN9q0r4WUCb8VF1px6AiEA/VNKf/yFovDUIx5Uc3BBIOdnCq8C9Vg0I7khs3ZzpC8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231116001525-613c4578-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":532639},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231116001525-613c4578-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/0bcbe8ab66f62d94f3c46cf7dd82a8d1/blocksuite-virgo-0.0.0-20231116001525-613c4578-nightly.tgz","_integrity":"sha512-IE5cKfLi0VU2KgY08Tf4OjlIu3/D2PQmilKaA1Ba5qvB4cwI7vKZbfpI6+AqZRIkkZxsdlsYPX+bTCn1EgK/3Q==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231116001525-613c4578-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231116001525-613c4578-nightly_1700094248780_0.4544168073192325","host":"s3://npm-registry-packages"}},"0.0.0-20231116023037-31273bb7-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231116023037-31273bb7-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231116023037-31273bb7-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"bf40737b8803eb26fa8bee084163c52a050b48d6","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231116023037-31273bb7-nightly.tgz","fileCount":178,"integrity":"sha512-xk4iTo+AEsxZiZF7+cgj/uOe5D3e8vgGp8gvdSUmbm1LlZeUHz0q2RIZWopu1/r6chlDXtHGAd6XOuKImuajNw==","signatures":[{"sig":"MEUCIQDgB8CVEENY+INgvyNlmXM6AN/OtkHYzOlWszOJCMXjvwIgI+Np3278E/QH//KYINtkHRRlYcc1jfuNgKldGxDEh9c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231116023037-31273bb7-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":532639},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231116023037-31273bb7-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/d69aaafcd1e36e57fc392b0a896ad2d5/blocksuite-virgo-0.0.0-20231116023037-31273bb7-nightly.tgz","_integrity":"sha512-xk4iTo+AEsxZiZF7+cgj/uOe5D3e8vgGp8gvdSUmbm1LlZeUHz0q2RIZWopu1/r6chlDXtHGAd6XOuKImuajNw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231116023037-31273bb7-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231116023037-31273bb7-nightly_1700102016127_0.49476552981551625","host":"s3://npm-registry-packages"}},"0.0.0-20231116182319-d78c07cd-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231116182319-d78c07cd-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231116182319-d78c07cd-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"5e68541f35a06545ece0b256562be4e92a81a281","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231116182319-d78c07cd-nightly.tgz","fileCount":178,"integrity":"sha512-7iLFCxq48/yBxMdrhVeXtap2HI2Yp17PjaSTPKwdbY2ldHebV1r9sLGygYpvXt/XJftirpr3fJYmJ2zAH3+ong==","signatures":[{"sig":"MEQCIAOaIZI2FIz3afeq6ZYhtTWrJ6EnQr0uJFOkdRKeVEhKAiBsc3iPqXpUn7DOhR/AOlqF6S0/cLz9R98j47rIHoEV2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231116182319-d78c07cd-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":532639},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231116182319-d78c07cd-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/54643633a124324e967504525984bd76/blocksuite-virgo-0.0.0-20231116182319-d78c07cd-nightly.tgz","_integrity":"sha512-7iLFCxq48/yBxMdrhVeXtap2HI2Yp17PjaSTPKwdbY2ldHebV1r9sLGygYpvXt/XJftirpr3fJYmJ2zAH3+ong==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231116182319-d78c07cd-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231116182319-d78c07cd-nightly_1700180637595_0.7750108431754064","host":"s3://npm-registry-packages"}},"0.0.0-20231117210747-f0fae3d3-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231117210747-f0fae3d3-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231117210747-f0fae3d3-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"add2f622b38b09811f058c5ab343ad39630a6074","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231117210747-f0fae3d3-nightly.tgz","fileCount":178,"integrity":"sha512-muEMdX8n2k8OisPP2rdSFPNE2c921l79TkZ7aDGwRBA07Oah4rfAJZPd3KnU37a0y/OOR1QrnurPVLKKDj+3Eg==","signatures":[{"sig":"MEUCIGVhAjv4HiWtWDeQCAMakY3Jy6TqLOBah/hv52lU/hpZAiEAhDWrgEmoZdfJQCugcnRa0GbuP8iqdW2bzZL7NylyDbI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231117210747-f0fae3d3-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":532639},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231117210747-f0fae3d3-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/67f6ff54e064136f81f05a4c22fe967e/blocksuite-virgo-0.0.0-20231117210747-f0fae3d3-nightly.tgz","_integrity":"sha512-muEMdX8n2k8OisPP2rdSFPNE2c921l79TkZ7aDGwRBA07Oah4rfAJZPd3KnU37a0y/OOR1QrnurPVLKKDj+3Eg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231117210747-f0fae3d3-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231117210747-f0fae3d3-nightly_1700267011624_0.3097949512943847","host":"s3://npm-registry-packages"}},"0.0.0-20231118232251-b86518c0-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231118232251-b86518c0-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231118232251-b86518c0-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"43786768f2854e3845aa3bba75889504147ef61d","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231118232251-b86518c0-nightly.tgz","fileCount":178,"integrity":"sha512-62G43L8vf1I+p+4hzD0PncsxaVCB08gwK5S2KyIkkcQE+iBIN20ZP6OXo+/m8Ezvsi9XypOP5zw7IUcGxuQECA==","signatures":[{"sig":"MEQCIH0DBTMqVuaJXEeaZlad1Ur9XkqzBZ5Evjh8fAqcxqgbAiB6lPXoWmh1JaVwweOpiej/W2QyouwldPUcbrAaaNdFAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231118232251-b86518c0-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":532639},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231118232251-b86518c0-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/87484df90971d20d146c181d66ece7a8/blocksuite-virgo-0.0.0-20231118232251-b86518c0-nightly.tgz","_integrity":"sha512-62G43L8vf1I+p+4hzD0PncsxaVCB08gwK5S2KyIkkcQE+iBIN20ZP6OXo+/m8Ezvsi9XypOP5zw7IUcGxuQECA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231118232251-b86518c0-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231118232251-b86518c0-nightly_1700353575467_0.4049659332064275","host":"s3://npm-registry-packages"}},"0.0.0-20231120161302-31e19e84-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231120161302-31e19e84-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231120161302-31e19e84-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"429085df97beb50b42bb660c7531161634d874f9","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231120161302-31e19e84-nightly.tgz","fileCount":178,"integrity":"sha512-ryrNwADVo+F1fk6NQovHJkIUFNNpc/bz+DOT3e3UMM0d4tGw5luOw4So5ksfkjeVg9c6kDeRkEn9h+EnkZEdrQ==","signatures":[{"sig":"MEYCIQDy/y7aiRZxB6kPRQL9/qB21GcvzDn88139dPifwNla0QIhAIC4C6V8Ff2ZHmudRr2oPMmmSz+XJHpJz9/vHGgScgUK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231120161302-31e19e84-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":532877},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231120161302-31e19e84-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/4ff624dabd6d4da02317cedc20959d32/blocksuite-virgo-0.0.0-20231120161302-31e19e84-nightly.tgz","_integrity":"sha512-ryrNwADVo+F1fk6NQovHJkIUFNNpc/bz+DOT3e3UMM0d4tGw5luOw4So5ksfkjeVg9c6kDeRkEn9h+EnkZEdrQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231120161302-31e19e84-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231120161302-31e19e84-nightly_1700526278016_0.034444933596339045","host":"s3://npm-registry-packages"}},"0.0.0-20231121141506-b91e620e-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231121141506-b91e620e-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231121141506-b91e620e-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"b08f23768e4c0e96eb70c5498f0a3fdc30bc21ed","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231121141506-b91e620e-nightly.tgz","fileCount":178,"integrity":"sha512-P9hMOMmpjfmFM6b3k+BrfvNA97OaY9Lnh1OJgmAGxWu40w8OODO33Xw4KeRwECpxwm+No/OW1z8woiRZM9KZ1g==","signatures":[{"sig":"MEYCIQDLSeVvemzaTE9wl+2H2Jd0LyPBFoq6ssdnEy/n7C27oQIhAPRbpXZepea8P3Ps6uU19cQLPV9rwgl+o5hwys9z9F6F","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231121141506-b91e620e-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":532877},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231121141506-b91e620e-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/45f54c8bd26ec2b738a6e090086523c9/blocksuite-virgo-0.0.0-20231121141506-b91e620e-nightly.tgz","_integrity":"sha512-P9hMOMmpjfmFM6b3k+BrfvNA97OaY9Lnh1OJgmAGxWu40w8OODO33Xw4KeRwECpxwm+No/OW1z8woiRZM9KZ1g==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231121141506-b91e620e-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231121141506-b91e620e-nightly_1700612730815_0.13403858985454975","host":"s3://npm-registry-packages"}},"0.0.0-20231122030911-ce7ac88f-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231122030911-ce7ac88f-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231122030911-ce7ac88f-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"007770db87d1e2cf622b223e72a2ad2e5e437585","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231122030911-ce7ac88f-nightly.tgz","fileCount":178,"integrity":"sha512-5+aqoibipl6qy54uFzKESH09HdjJj4UlwS/NqfWiz1JeSVJRlC1x7J+1Jl4KgeXdyaDol2+qEzGY3ItWqSVa6A==","signatures":[{"sig":"MEUCIH2DXWKBEQjiGDTY2DyAW/GpUxK1fWAGyrn01zlNcZswAiEA5nVQn2izpdMzsFasiHr7x1V2fWLO3id/J+QPVIM4/9c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231122030911-ce7ac88f-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":532877},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231122030911-ce7ac88f-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/f6ee21f2656b4c0ef8fdf92680cbdd67/blocksuite-virgo-0.0.0-20231122030911-ce7ac88f-nightly.tgz","_integrity":"sha512-5+aqoibipl6qy54uFzKESH09HdjJj4UlwS/NqfWiz1JeSVJRlC1x7J+1Jl4KgeXdyaDol2+qEzGY3ItWqSVa6A==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231122030911-ce7ac88f-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231122030911-ce7ac88f-nightly_1700622755290_0.761591496996125","host":"s3://npm-registry-packages"}},"0.0.0-20231122080937-d46dd0bc-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231122080937-d46dd0bc-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231122080937-d46dd0bc-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"f81211a56deb308e75fd98282b4e889ff7caf419","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231122080937-d46dd0bc-nightly.tgz","fileCount":178,"integrity":"sha512-km5ofqvLfMC8JhcZSaSjqK4iI8kwlSVs0ANrhcAO5w7GS1zLvURZ/Zyhrs907kcRZju2oDPytKkpJLf7jvnzhQ==","signatures":[{"sig":"MEYCIQC5F3Jt3x6xEc519pa0JsrpD4+VyykCeor9BxvscQ8QPQIhAPUhoWx6e3wYDFVUaQLEfmO1MA1nwwb7fTBNuTjW26Be","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231122080937-d46dd0bc-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":532877},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231122080937-d46dd0bc-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/0093601d2837b43996877eaa486fe22a/blocksuite-virgo-0.0.0-20231122080937-d46dd0bc-nightly.tgz","_integrity":"sha512-km5ofqvLfMC8JhcZSaSjqK4iI8kwlSVs0ANrhcAO5w7GS1zLvURZ/Zyhrs907kcRZju2oDPytKkpJLf7jvnzhQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231122080937-d46dd0bc-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231122080937-d46dd0bc-nightly_1700641016394_0.9914084294589267","host":"s3://npm-registry-packages"}},"0.0.0-20231122113751-6bf81eb3-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231122113751-6bf81eb3-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231122113751-6bf81eb3-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"ed670413a91d39d3ac674029f47a3812b4fc6c6f","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231122113751-6bf81eb3-nightly.tgz","fileCount":178,"integrity":"sha512-m6kD+4TGR3n7Mo5utR/s9TZwA5zf1+5eR88YpniLDwKV+nCAAPTqiUNRGU4IOlyfyycZSBh5ynCnJTweIXHNHg==","signatures":[{"sig":"MEQCIBcpHFw4IG1aD2VFwWG6z4MZAtmEMiYLVh4qIDr5I/GJAiAJrj5xWruchcF7GGBwP3DJ68JE4Vl7V6WUkagdfq4mPQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231122113751-6bf81eb3-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":532877},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231122113751-6bf81eb3-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/2cd112105753e288526fcd1f57c15542/blocksuite-virgo-0.0.0-20231122113751-6bf81eb3-nightly.tgz","_integrity":"sha512-m6kD+4TGR3n7Mo5utR/s9TZwA5zf1+5eR88YpniLDwKV+nCAAPTqiUNRGU4IOlyfyycZSBh5ynCnJTweIXHNHg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231122113751-6bf81eb3-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231122113751-6bf81eb3-nightly_1700655939204_0.624915956296838","host":"s3://npm-registry-packages"}},"0.0.0-20231122145541-bee38b14-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231122145541-bee38b14-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231122145541-bee38b14-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"6c9b4ee5593116bc489dce9cb533015e0007ae15","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231122145541-bee38b14-nightly.tgz","fileCount":178,"integrity":"sha512-ABeGWs57P0JVVbeOTRTpMZnTQ3oh3kQL+UkW4JyljnjdunN6YeDfazdYVqGXmHURG7Z/2/cU8QTeqtKQu/CuWg==","signatures":[{"sig":"MEUCIFxcamUbLiUXW3a/JARp3RYuZEbzJwiIpQjBRx3Hh+jmAiEA2ge6fVHNtuOEhYCIj4hccxHsQPowgcsbuH4vzfqVH0E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231122145541-bee38b14-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":532877},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231122145541-bee38b14-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/5bdf1aad5a59f47b5523323d52a60fca/blocksuite-virgo-0.0.0-20231122145541-bee38b14-nightly.tgz","_integrity":"sha512-ABeGWs57P0JVVbeOTRTpMZnTQ3oh3kQL+UkW4JyljnjdunN6YeDfazdYVqGXmHURG7Z/2/cU8QTeqtKQu/CuWg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231122145541-bee38b14-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231122145541-bee38b14-nightly_1700699052402_0.4459262999122866","host":"s3://npm-registry-packages"}},"0.0.0-20231123121754-5332da05-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231123121754-5332da05-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231123121754-5332da05-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"d9a1ecd093e0a9f687e786d26dbb63b00c9f009e","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231123121754-5332da05-nightly.tgz","fileCount":178,"integrity":"sha512-phK6pHWxVlbficFmyZ0W94OZtlOeGkvRdVD+MKyXMkW07+ZwICw4ndF00qThwrgq39BZLBcNz2HSGhT3LiCiwQ==","signatures":[{"sig":"MEYCIQCnbXrQhgHb4Gj3HJ1m3u/krtTVfmaD0WtDrFBOSZ2UogIhANjAMJbPLj2FBzXMRv6ulhXktXoMSSYUE1KgdNHRBN3F","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231123121754-5332da05-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":532860},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231123121754-5332da05-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/f1acddb7e3f992844d0e1c96d18ec01f/blocksuite-virgo-0.0.0-20231123121754-5332da05-nightly.tgz","_integrity":"sha512-phK6pHWxVlbficFmyZ0W94OZtlOeGkvRdVD+MKyXMkW07+ZwICw4ndF00qThwrgq39BZLBcNz2HSGhT3LiCiwQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231123121754-5332da05-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231123121754-5332da05-nightly_1700785401342_0.6820517418932859","host":"s3://npm-registry-packages"}},"0.0.0-20231123092349-a42b9d29-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231123092349-a42b9d29-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231123092349-a42b9d29-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"0eb2d6da9fcec72b9acb7b66df4264be1a38533c","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231123092349-a42b9d29-nightly.tgz","fileCount":178,"integrity":"sha512-+mooW7D4/Ws2hzlfAprqqC9/A9stqFk+iNDPY2feO8dJtUeDLXVcTmdiYyQMytsdOWeuZc7WPduT1pSU41fn1A==","signatures":[{"sig":"MEYCIQC3qXlNTr2T6nKbLKrgV8dUdH2jwJPKEmNApmE1Hm01GAIhAJR9y855K1GEkjn6hRy6v9ov3XRu+RxpDHJDWSpDBdtf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231123092349-a42b9d29-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":532860},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231123092349-a42b9d29-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/da0f9c5aee4ca68e9ba1ec1d9c83fc0d/blocksuite-virgo-0.0.0-20231123092349-a42b9d29-nightly.tgz","_integrity":"sha512-+mooW7D4/Ws2hzlfAprqqC9/A9stqFk+iNDPY2feO8dJtUeDLXVcTmdiYyQMytsdOWeuZc7WPduT1pSU41fn1A==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231123092349-a42b9d29-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231123092349-a42b9d29-nightly_1700816983458_0.6412764023215256","host":"s3://npm-registry-packages"}},"0.0.0-20231124123613-7c06e95d-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231124123613-7c06e95d-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231124123613-7c06e95d-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"882d46f2bb0cd8a8a585221bc43ac83c4b64ccc3","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231124123613-7c06e95d-nightly.tgz","fileCount":178,"integrity":"sha512-RseOvnqP2teBnNPwTjcoEUWJhzUH26yV0fHAQLuF2qeBrwWTf739nehAz0ow+dZg5D5cuEC3+X1CkaRm/fogJA==","signatures":[{"sig":"MEUCICtGzQltWFqqXtp1fk8jtVEfiU+WPh+i4i0aOynwdAFfAiEAv7FuI3hKzt+AmFUT4U/Ml778I4WMFtlrA0QxTLZDRr0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231124123613-7c06e95d-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":532860},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231124123613-7c06e95d-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/7a496db5a7aee03a8524c5bbe2ddbd41/blocksuite-virgo-0.0.0-20231124123613-7c06e95d-nightly.tgz","_integrity":"sha512-RseOvnqP2teBnNPwTjcoEUWJhzUH26yV0fHAQLuF2qeBrwWTf739nehAz0ow+dZg5D5cuEC3+X1CkaRm/fogJA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231124123613-7c06e95d-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231124123613-7c06e95d-nightly_1700836587736_0.947881017672211","host":"s3://npm-registry-packages"}},"0.0.0-20231124234659-773f45dc-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231124234659-773f45dc-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231124234659-773f45dc-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"d846e4881af2783bf159f73c3e763ac239af6ef2","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231124234659-773f45dc-nightly.tgz","fileCount":178,"integrity":"sha512-dpzmQY0hb301zFyXOtthuLYBUR8Y4pMwXi7S8zkfnGjtgbL6qSsIJHl/ZaACp3NOw6rRDFMgxHeopngzeat7tA==","signatures":[{"sig":"MEUCIA8KC2/s+WVd/pkJtOizZIW90HQSYaRG5VfbS+eJFyTOAiEAtzizqLp+YYRR4eWwHIezYfUa4IENYXbx7nzWip6BrZQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231124234659-773f45dc-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":532860},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231124234659-773f45dc-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/8d6d5871821015ad4c82c1bbc6f57cd4/blocksuite-virgo-0.0.0-20231124234659-773f45dc-nightly.tgz","_integrity":"sha512-dpzmQY0hb301zFyXOtthuLYBUR8Y4pMwXi7S8zkfnGjtgbL6qSsIJHl/ZaACp3NOw6rRDFMgxHeopngzeat7tA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231124234659-773f45dc-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231124234659-773f45dc-nightly_1700871782636_0.47688046691843855","host":"s3://npm-registry-packages"}},"0.0.0-20231125093248-f69f4092-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231125093248-f69f4092-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231125093248-f69f4092-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"4fd4269f9f80cf5215f97b43257dac204883fa2a","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231125093248-f69f4092-nightly.tgz","fileCount":178,"integrity":"sha512-mUnNz0T6RBssmbLpVzbDVfcSiQRoDAbnOxJ2TIKf/BfFIR2YWVyvG2A/EUXGm/ShOdgyBJ1X56T3oOSIMCJ9Bg==","signatures":[{"sig":"MEYCIQCW8AcyzUXNoRs/wGdw7rTnvo7A28fIxbsWATbQZaVm7QIhANaYxIqfl1nUWO95o6ibrJQM/RyYYSi/0TRJrhxcQYuJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231125093248-f69f4092-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":532860},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231125093248-f69f4092-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/60de8d28392ac7af6c16c0463051a1a5/blocksuite-virgo-0.0.0-20231125093248-f69f4092-nightly.tgz","_integrity":"sha512-mUnNz0T6RBssmbLpVzbDVfcSiQRoDAbnOxJ2TIKf/BfFIR2YWVyvG2A/EUXGm/ShOdgyBJ1X56T3oOSIMCJ9Bg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231125093248-f69f4092-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231125093248-f69f4092-nightly_1700958347977_0.6594958929456638","host":"s3://npm-registry-packages"}},"0.0.0-20231126143809-55f43c7d-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231126143809-55f43c7d-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231126143809-55f43c7d-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"253ba07c00c95815ff3270b15d0b5f266d279d9b","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231126143809-55f43c7d-nightly.tgz","fileCount":178,"integrity":"sha512-QJ6LTW7lLl2NzmdjDywVfLjlsX7uIQt19aMqtQiv88MrWtSpvVrgpvry1a22pmd8oIJE06NR5rkeRTefDvJkrw==","signatures":[{"sig":"MEUCID4h9arUwKe/fr01fS5zHboL8E7qcUmOqR8TTjGychMZAiEAiae9Q6de6/Gixq5DTrhSZPYfkUhrmG4WcKl068UMS/s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231126143809-55f43c7d-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":532860},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231126143809-55f43c7d-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/f5a63e2c36bfb395490b663e2e755819/blocksuite-virgo-0.0.0-20231126143809-55f43c7d-nightly.tgz","_integrity":"sha512-QJ6LTW7lLl2NzmdjDywVfLjlsX7uIQt19aMqtQiv88MrWtSpvVrgpvry1a22pmd8oIJE06NR5rkeRTefDvJkrw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231126143809-55f43c7d-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231126143809-55f43c7d-nightly_1701044679923_0.09570950347733853","host":"s3://npm-registry-packages"}},"0.10.0":{"name":"@blocksuite/virgo","version":"0.10.0","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.10.0","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"34cf01df3a90f669fc3dbbd558302cfc13995fec","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.10.0.tgz","fileCount":178,"integrity":"sha512-8IKKvNBUPBrY+xDdf1bzhy7stYyKm6s3w9oSPPnFc1K2ZG2hJ9Z16go33c1CxuiNVsdiPSl1jkzyE5tt0N849g==","signatures":[{"sig":"MEUCIBtUAW0SKSskBEdQ39fs3iriTFrPIHoVuOHtQlKCSxuwAiEAxHi/522h6Oi5N7MxuTInTtmTIznvQwUtj4geNZOkxDw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.10.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":532798},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.10.0.tgz","types":"dist/index.d.ts","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/41a44e0b74865f7ee9b89b032abc3dba/blocksuite-virgo-0.10.0.tgz","_integrity":"sha512-8IKKvNBUPBrY+xDdf1bzhy7stYyKm6s3w9oSPPnFc1K2ZG2hJ9Z16go33c1CxuiNVsdiPSl1jkzyE5tt0N849g==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.10.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.10.0_1701081082065_0.9733768281924267","host":"s3://npm-registry-packages"}},"0.0.0-20231127102934-4db7c04e-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231127102934-4db7c04e-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231127102934-4db7c04e-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"cafb982e033777a6e44ee4edcb5a83c3e7b5e347","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231127102934-4db7c04e-nightly.tgz","fileCount":178,"integrity":"sha512-nuAMFaS3BKImkZHU+zaYdraTbYBXAaSqHJFmMuPEQdKIgTnS5qTXQACnVf/qptwRLCQo0lXdtnyBtivuNHQ3dw==","signatures":[{"sig":"MEUCIGR+2E8ba00tXWPT8cYP2HNI4fiuRINQ5L+6WDZM1OEFAiEA5We+zlyatDAZoP4LBe+xvaQZrrqfv6Uo/69d8VTFtSE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231127102934-4db7c04e-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":532860},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231127102934-4db7c04e-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/da950ec9293ead6ffb60017b937e6a3a/blocksuite-virgo-0.0.0-20231127102934-4db7c04e-nightly.tgz","_integrity":"sha512-nuAMFaS3BKImkZHU+zaYdraTbYBXAaSqHJFmMuPEQdKIgTnS5qTXQACnVf/qptwRLCQo0lXdtnyBtivuNHQ3dw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231127102934-4db7c04e-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231127102934-4db7c04e-nightly_1701131053532_0.9199064321811006","host":"s3://npm-registry-packages"}},"0.0.0-20231128125833-66182b18-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231128125833-66182b18-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231128125833-66182b18-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"23713943d58d7917ad7cd10aef8658764f825541","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231128125833-66182b18-nightly.tgz","fileCount":178,"integrity":"sha512-QpUef2xsWy3hXN371WiOu3KdV3eaVpVlKvVcaOf6H5Fxql/Yk9siEtRF2spXiWfmwnJQfxopqOxSlNWqvOYfRQ==","signatures":[{"sig":"MEUCIDOWnaEuClE6P9GKOKKCTPBH5Gc77rCcBARNKM2XNBilAiEAmzxI9wtW0ETy8SRZYsyyl3MCkfiJ30KZBo2cXeoluZg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231128125833-66182b18-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":532806},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231128125833-66182b18-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/cab5781fd61f1b9d28af546c31bed29b/blocksuite-virgo-0.0.0-20231128125833-66182b18-nightly.tgz","_integrity":"sha512-QpUef2xsWy3hXN371WiOu3KdV3eaVpVlKvVcaOf6H5Fxql/Yk9siEtRF2spXiWfmwnJQfxopqOxSlNWqvOYfRQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231128125833-66182b18-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231128125833-66182b18-nightly_1701217469844_0.37597557020205086","host":"s3://npm-registry-packages"}},"0.0.0-20231129061623-2c7d451b-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231129061623-2c7d451b-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231129061623-2c7d451b-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"cbcb0cb9fc7cd6552103ac55649655b05f4ae305","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231129061623-2c7d451b-nightly.tgz","fileCount":178,"integrity":"sha512-3xQ6Z7X/SzpEZLqKBVWb0T/BhkVra32jCZgF2hy+qb/9zhNl6uXZbEQ9FbpA8xmUYfXOdCAa4/3f2UoExC5FLQ==","signatures":[{"sig":"MEUCIQDGef7Ax2w7SoLlnTkrBm71cMW4ZjHqQjT0QQAYuKbFMQIgVhOeahQjtsg2e27igB5Yk4iLwRE6u1Wyg7dRsT8yHWw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231129061623-2c7d451b-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":532806},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231129061623-2c7d451b-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://blocksuite-toeverything.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/2c8ea67f02ca2b1255a4d1070de1efdf/blocksuite-virgo-0.0.0-20231129061623-2c7d451b-nightly.tgz","_integrity":"sha512-3xQ6Z7X/SzpEZLqKBVWb0T/BhkVra32jCZgF2hy+qb/9zhNl6uXZbEQ9FbpA8xmUYfXOdCAa4/3f2UoExC5FLQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231129061623-2c7d451b-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231129061623-2c7d451b-nightly_1701244838174_0.5029505489237993","host":"s3://npm-registry-packages"}},"0.0.0-20231129200023-14f7d22b-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231129200023-14f7d22b-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231129200023-14f7d22b-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"75f4d5dd09abe6bacf5b08fe8c3c6c0cdd31341b","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231129200023-14f7d22b-nightly.tgz","fileCount":178,"integrity":"sha512-gw+HO57QgLFwcvy7X2mjt3MsVP4sTBa/OGnbEWq9KNVLEiyBfkhzRdWltPbTHmcMf/Lw8WOVz+GUvR2+MgLiuA==","signatures":[{"sig":"MEYCIQCgp50uxyBkJZhJEfvwwdCy5SbUizdQRK9mP5EnBh8EdwIhAMD06bC/O2l3LTVQEdxN3rTJxucSAN/Bs/76LqAvzUcS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231129200023-14f7d22b-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":532797},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231129200023-14f7d22b-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://try-blocksuite.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/c1c51645ce2a6315a4b26328a24471a5/blocksuite-virgo-0.0.0-20231129200023-14f7d22b-nightly.tgz","_integrity":"sha512-gw+HO57QgLFwcvy7X2mjt3MsVP4sTBa/OGnbEWq9KNVLEiyBfkhzRdWltPbTHmcMf/Lw8WOVz+GUvR2+MgLiuA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231129200023-14f7d22b-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231129200023-14f7d22b-nightly_1701303871973_0.2114686600335347","host":"s3://npm-registry-packages"}},"0.0.0-20231130025440-fbb2c00f-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231130025440-fbb2c00f-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231130025440-fbb2c00f-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"e7c58df8e886cdbb54b93546cd40055a83c9b373","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231130025440-fbb2c00f-nightly.tgz","fileCount":178,"integrity":"sha512-TraazM7bLYl7YjVTjn8vw7SQYQtj7gAbEZSsBuSl3kpmrTfmV9pAuWsMlbU2G12CLgv8h5eSJF/TqdA6thpTSA==","signatures":[{"sig":"MEUCIEwYbmNo8kFVV+ciBcVpCR+l4Dtb+nvnG1ZN+WoZZwUlAiEA3j/pJ8ySWHun+aw7zYkHdrueFc6lzEP56oWWVZFJcus=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231130025440-fbb2c00f-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":532797},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231130025440-fbb2c00f-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://try-blocksuite.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/593074a2e025ca9fc5216da3c70f5ede/blocksuite-virgo-0.0.0-20231130025440-fbb2c00f-nightly.tgz","_integrity":"sha512-TraazM7bLYl7YjVTjn8vw7SQYQtj7gAbEZSsBuSl3kpmrTfmV9pAuWsMlbU2G12CLgv8h5eSJF/TqdA6thpTSA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231130025440-fbb2c00f-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231130025440-fbb2c00f-nightly_1701314184534_0.7199512476983314","host":"s3://npm-registry-packages"}},"0.0.0-20231130092516-0f858b95-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231130092516-0f858b95-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231130092516-0f858b95-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"179971dc0c217bd97787f92a5483761dcf03243d","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231130092516-0f858b95-nightly.tgz","fileCount":178,"integrity":"sha512-xGbCQ8Br/4TP9AEAgobeu4VcyvqsH9NXn/x3JFgjkXrgj0kXuPOLfxL8n9tia/sR3guA4zf1nTHG4NqtJnrhfA==","signatures":[{"sig":"MEUCIQCM4pDZlg7KjU/DikJn5BAMCH2B9IjYNIGV/3PcRmY1WgIgStQCWZ5kN9Zk/AkRYmKMur6bNr4+MCK9bQol103l4Yg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231130092516-0f858b95-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":532797},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231130092516-0f858b95-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://try-blocksuite.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/b38ba0b50aabf469235bb09480dd9bda/blocksuite-virgo-0.0.0-20231130092516-0f858b95-nightly.tgz","_integrity":"sha512-xGbCQ8Br/4TP9AEAgobeu4VcyvqsH9NXn/x3JFgjkXrgj0kXuPOLfxL8n9tia/sR3guA4zf1nTHG4NqtJnrhfA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231130092516-0f858b95-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231130092516-0f858b95-nightly_1701336549735_0.2757935036687429","host":"s3://npm-registry-packages"}},"0.0.0-20231130143113-735df194-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231130143113-735df194-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231130143113-735df194-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"bbd94ff14b63b4e4499870fd76c2fc6b1410714e","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231130143113-735df194-nightly.tgz","fileCount":41,"integrity":"sha512-8RvG6jTqCfhw7whF+AxHdD7tmiV46MXFnDwpMehfppI+nBffvm3ixPcylLnYOb8PZKMhKfsqz0M+Kn7TvaSUKg==","signatures":[{"sig":"MEYCIQDkoJc9P2TRytIc09UNmYc8RH1iB3lQ07be3NcRlE9jGwIhAPJE/YwWi5R4lmg6QfjMxrZSkW4WunchCsbc3eY12iR5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231130143113-735df194-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":150810},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231130143113-735df194-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://try-blocksuite.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/710b48225293d05128942680d64dcd16/blocksuite-virgo-0.0.0-20231130143113-735df194-nightly.tgz","_integrity":"sha512-8RvG6jTqCfhw7whF+AxHdD7tmiV46MXFnDwpMehfppI+nBffvm3ixPcylLnYOb8PZKMhKfsqz0M+Kn7TvaSUKg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231130143113-735df194-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231130143113-735df194-nightly_1701390409880_0.7894319331001747","host":"s3://npm-registry-packages"}},"0.0.0-20231201164740-f2324b82-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231201164740-f2324b82-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231201164740-f2324b82-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"b3fb5769866c13f6b796ec3f8352626ec0a01f44","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231201164740-f2324b82-nightly.tgz","fileCount":41,"integrity":"sha512-WaoUpkAF5zmSSX9ffucTZhJlEQsNuJUQcNbD5SqYygj/ug4VwVSwCZIHfG7W/Q37RghxPIM/ZvK0HFGcG3zaNQ==","signatures":[{"sig":"MEQCIAZlf6IIQQTwCjFmClcrQuRlCK5yvQKdPn5YNPEdxDBuAiBcJlUylMsiQ93W0ctxFp+JTl/VMPTDJIJSPw56CDoUGw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231201164740-f2324b82-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":150810},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231201164740-f2324b82-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://try-blocksuite.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/78e911a3c689a479e119a021c90b88d6/blocksuite-virgo-0.0.0-20231201164740-f2324b82-nightly.tgz","_integrity":"sha512-WaoUpkAF5zmSSX9ffucTZhJlEQsNuJUQcNbD5SqYygj/ug4VwVSwCZIHfG7W/Q37RghxPIM/ZvK0HFGcG3zaNQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231201164740-f2324b82-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231201164740-f2324b82-nightly_1701476586818_0.11134585886798898","host":"s3://npm-registry-packages"}},"0.0.0-20231202175457-d8257e52-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231202175457-d8257e52-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231202175457-d8257e52-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"1f436492beee419be4f30bc8fd842a37dc66f368","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231202175457-d8257e52-nightly.tgz","fileCount":41,"integrity":"sha512-kpwU3J2PinG0jYTWxDeGNepPqnrFl5DS1sF2qVgLeUPbdiQIQvZrJuTjS2FilI1PK6fz8rTgwdeczEDTWK7gag==","signatures":[{"sig":"MEYCIQDDM53RjxlWiXDkVMD1iyKAaUnsxI3eA1VV8ox6hT11sgIhAPqa/ywtJNQLOjm8t6kNBUwMx6nZznnDt0pYDImyUBK6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231202175457-d8257e52-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":150810},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231202175457-d8257e52-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://try-blocksuite.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: z.enum(['Subpage', 'LinkedPage']),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/f95e4152c4ae8c0a4a719403f242b8ad/blocksuite-virgo-0.0.0-20231202175457-d8257e52-nightly.tgz","_integrity":"sha512-kpwU3J2PinG0jYTWxDeGNepPqnrFl5DS1sF2qVgLeUPbdiQIQvZrJuTjS2FilI1PK6fz8rTgwdeczEDTWK7gag==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231202175457-d8257e52-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231202175457-d8257e52-nightly_1701563161919_0.18307614657897253","host":"s3://npm-registry-packages"}},"0.0.0-20231204140005-aac86f1f-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231204140005-aac86f1f-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231204140005-aac86f1f-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"6ebbcc3bb982b32d367e6df92c46046b049581ba","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231204140005-aac86f1f-nightly.tgz","fileCount":41,"integrity":"sha512-MAMwmmZNxtUwkXXPFcQVO2E0ftjGbOYLI2XN8bh5heGOCqiBWTUu+IiEG+j5t6WpseoLxRPIXex8CMhywzAGQA==","signatures":[{"sig":"MEYCIQCrJBIRnZUAw5nL88JN4Ok+DP/QscwY5UgylmBh/haBmAIhAI5aooYOo5ZwUbRiFPxB+UkstWtx8fmX6NdU/bUo3fZn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231204140005-aac86f1f-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":150970},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231204140005-aac86f1f-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://try-blocksuite.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: type: z.enum([\n        // @deprecated Subpage is deprecated, use LinkedPage instead\n        'Subpage',\n        'LinkedPage',\n      ]),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n  color: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/e2aa9e3e78aa30172089f9a026d05514/blocksuite-virgo-0.0.0-20231204140005-aac86f1f-nightly.tgz","_integrity":"sha512-MAMwmmZNxtUwkXXPFcQVO2E0ftjGbOYLI2XN8bh5heGOCqiBWTUu+IiEG+j5t6WpseoLxRPIXex8CMhywzAGQA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231204140005-aac86f1f-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231204140005-aac86f1f-nightly_1701735903888_0.1476529064367189","host":"s3://npm-registry-packages"}},"0.0.0-20231205014633-87633ea8-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231205014633-87633ea8-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231205014633-87633ea8-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"5cc48f03e926c2a1e639abfeeb7944499e242fa4","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231205014633-87633ea8-nightly.tgz","fileCount":41,"integrity":"sha512-jsfBzPmESbaEvaqNJ58k12xSGQPdpT37W7SP3fNUtN0o2hUxjMgVnuX74/eXrsWuk56fL8BatysdhKLaYEeRAA==","signatures":[{"sig":"MEYCIQD65A3qfk3DcL+tmpl2s+oMAT0gIshQAxZUiOwqrE/N4gIhAObMOchK3nX5wjakfxFpWZwqSBPEAFZ2yaSGnE9aSuVn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231205014633-87633ea8-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":150970},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231205014633-87633ea8-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://try-blocksuite.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: type: z.enum([\n        // @deprecated Subpage is deprecated, use LinkedPage instead\n        'Subpage',\n        'LinkedPage',\n      ]),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n  color: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/131be12832d8432892211ee064e1d7a8/blocksuite-virgo-0.0.0-20231205014633-87633ea8-nightly.tgz","_integrity":"sha512-jsfBzPmESbaEvaqNJ58k12xSGQPdpT37W7SP3fNUtN0o2hUxjMgVnuX74/eXrsWuk56fL8BatysdhKLaYEeRAA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231205014633-87633ea8-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231205014633-87633ea8-nightly_1701741659483_0.0027919551541057963","host":"s3://npm-registry-packages"}},"0.0.0-20231205045113-03964196-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231205045113-03964196-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231205045113-03964196-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"4a1b64b29611aeac54c71a1fe1d0c00ec1022bcd","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231205045113-03964196-nightly.tgz","fileCount":178,"integrity":"sha512-KOngGcgXF/fd3Q1GfXfedP8ncOmwCqvwhWZ3GOujSZXFznAXbITPg3T9+F0Wzdq8HDUOfVTkRn8J9MKwU4Gg/A==","signatures":[{"sig":"MEQCIEKJqDXe4U5N555uFyXxhHUn5nFO6pstGau+WEkPyy+HAiBvxchiXvTb5AoAZ9tphwx3GSD/6BQJ38DOfQUGDRpS8A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231205045113-03964196-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":533913},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231205045113-03964196-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://try-blocksuite.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: type: z.enum([\n        // @deprecated Subpage is deprecated, use LinkedPage instead\n        'Subpage',\n        'LinkedPage',\n      ]),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n  color: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/4af0802017487b1957aead446bf4d19f/blocksuite-virgo-0.0.0-20231205045113-03964196-nightly.tgz","_integrity":"sha512-KOngGcgXF/fd3Q1GfXfedP8ncOmwCqvwhWZ3GOujSZXFznAXbITPg3T9+F0Wzdq8HDUOfVTkRn8J9MKwU4Gg/A==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231205045113-03964196-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231205045113-03964196-nightly_1701752098285_0.07227669137961645","host":"s3://npm-registry-packages"}},"0.0.0-20231205070718-0f862ee5-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231205070718-0f862ee5-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231205070718-0f862ee5-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"51de2f4de2d494546c901488b54cc44a555a5b27","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231205070718-0f862ee5-nightly.tgz","fileCount":178,"integrity":"sha512-fclGz6tRK+23M3owhoZRRCBTcOo9kL8QMgLvweDxz8byiebuGIkH6H8qv5opB5LGG0ykOmyuyhXnBDdtfrUCSA==","signatures":[{"sig":"MEQCIF4ejygZUzwa7i/RuLzAsqSjvUk1L0EMelqp7mJtTspYAiACyzhBlB1Oa0poIQYQIKawy/Q7rVcq+AwyQk9zVVKrJg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231205070718-0f862ee5-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":533913},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231205070718-0f862ee5-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://try-blocksuite.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: type: z.enum([\n        // @deprecated Subpage is deprecated, use LinkedPage instead\n        'Subpage',\n        'LinkedPage',\n      ]),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n  color: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/6268a582c2e8238b6b2042407f0c169a/blocksuite-virgo-0.0.0-20231205070718-0f862ee5-nightly.tgz","_integrity":"sha512-fclGz6tRK+23M3owhoZRRCBTcOo9kL8QMgLvweDxz8byiebuGIkH6H8qv5opB5LGG0ykOmyuyhXnBDdtfrUCSA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231205070718-0f862ee5-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231205070718-0f862ee5-nightly_1701760198772_0.7242288416640814","host":"s3://npm-registry-packages"}},"0.0.0-20231205095753-129ec7e5-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231205095753-129ec7e5-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231205095753-129ec7e5-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"f0b9a4eb9bde62cdc86d4e2fe8ff940245a75233","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231205095753-129ec7e5-nightly.tgz","fileCount":178,"integrity":"sha512-f9TByaz1HXnPtEwoAHn25O1w9oCgQBXxNky3Ap7MLzJmjGqc8Jofo7dITeVR1Hxz6Q5wAkhrfGqb+fBK7Rt+mg==","signatures":[{"sig":"MEUCIAo/kwysfd3prnjeU+7oCMo1Cu9NNy7y9aWofnrumz1IAiEAjXO/Nqsrtr0Exv4eoVkWVxwzSTpt0iIwqUyH79SG/cs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231205095753-129ec7e5-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":533913},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231205095753-129ec7e5-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://try-blocksuite.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: type: z.enum([\n        // @deprecated Subpage is deprecated, use LinkedPage instead\n        'Subpage',\n        'LinkedPage',\n      ]),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n  color: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/3056f84bf403e557ad3f6c980e0a6a94/blocksuite-virgo-0.0.0-20231205095753-129ec7e5-nightly.tgz","_integrity":"sha512-f9TByaz1HXnPtEwoAHn25O1w9oCgQBXxNky3Ap7MLzJmjGqc8Jofo7dITeVR1Hxz6Q5wAkhrfGqb+fBK7Rt+mg==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231205095753-129ec7e5-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.0.2","yjs":"^13.6.8"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231205095753-129ec7e5-nightly_1701822303482_0.7092909366569529","host":"s3://npm-registry-packages"}},"0.0.0-20231206051647-ab555738-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-20231206051647-ab555738-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-20231206051647-ab555738-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"88b0c94d700aa20d23ad2f224b89a32026fbab3a","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-20231206051647-ab555738-nightly.tgz","fileCount":178,"integrity":"sha512-RWjmY2XwSm3tQDBsOSdermuCMhR8InxapllTrmdiagyt4XRtBPQbZa84YzhRJH6Qo0hiu72pP3/0hHJPpnj/BA==","signatures":[{"sig":"MEUCIDAJI7xxjodXwJutETuELUE8Cq2l3j6tYpCvca3tPFtDAiEAu3jOgtm6r79z5sXYtRcoPSHUZnj7DI0f8hnz08yysQ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-20231206051647-ab555738-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":533367},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-20231206051647-ab555738-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://try-blocksuite.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: type: z.enum([\n        // @deprecated Subpage is deprecated, use LinkedPage instead\n        'Subpage',\n        'LinkedPage',\n      ]),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n  color: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/035d25ae6bb7f20cbce2dc95b0c68a35/blocksuite-virgo-0.0.0-20231206051647-ab555738-nightly.tgz","_integrity":"sha512-RWjmY2XwSm3tQDBsOSdermuCMhR8InxapllTrmdiagyt4XRtBPQbZa84YzhRJH6Qo0hiu72pP3/0hHJPpnj/BA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-20231206051647-ab555738-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.1.0","yjs":"^13.6.10"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-20231206051647-ab555738-nightly_1701850590485_0.8485992095318964","host":"s3://npm-registry-packages"}},"0.0.0-202312061317-6117e6c-nightly":{"name":"@blocksuite/virgo","version":"0.0.0-202312061317-6117e6c-nightly","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.0.0-202312061317-6117e6c-nightly","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"a43a9e66440109bbcd453d9dcdfbde72f814584d","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.0.0-202312061317-6117e6c-nightly.tgz","fileCount":178,"integrity":"sha512-EyE1ZnBlGf7oKXbIC3OvvzXlIYRQjA8TFogtkfFkCIPv4EWnAfNQ6Rg9RIHyHnc14X2kLrRXa6FIjj0IlOVsCA==","signatures":[{"sig":"MEUCIQC6hQzl0KkLeVJ8nLa+TRSvXIFgvm3/fx76qKyGUNpB9wIgbxGDB2LHMzITfCMDFg0hJlNemi+bOGcOa9iHUC4j6QY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.0.0-202312061317-6117e6c-nightly","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":533361},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.0.0-202312061317-6117e6c-nightly.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://try-blocksuite.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: type: z.enum([\n        // @deprecated Subpage is deprecated, use LinkedPage instead\n        'Subpage',\n        'LinkedPage',\n      ]),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n  color: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/a8a327a6d28b24bb409c41e9680d7a2e/blocksuite-virgo-0.0.0-202312061317-6117e6c-nightly.tgz","_integrity":"sha512-EyE1ZnBlGf7oKXbIC3OvvzXlIYRQjA8TFogtkfFkCIPv4EWnAfNQ6Rg9RIHyHnc14X2kLrRXa6FIjj0IlOVsCA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.0.0-202312061317-6117e6c-nightly"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.1.0","yjs":"^13.6.10"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.0.0-202312061317-6117e6c-nightly_1701873074966_0.9011769757006556","host":"s3://npm-registry-packages"}},"0.11.0-nightly-202312061456-a5bf73a":{"name":"@blocksuite/virgo","version":"0.11.0-nightly-202312061456-a5bf73a","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.11.0-nightly-202312061456-a5bf73a","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"37e0c1154506a9ff9f29cb0e5540d894aa8ceeeb","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.11.0-nightly-202312061456-a5bf73a.tgz","fileCount":178,"integrity":"sha512-vFyR/1Y05b99nBesYv2IqIU9VmpeHBo9Wy6MBg5pP9u3uBWJj3Rp/I4HrNcB5HnA6O9ehMgCQRpcGe6CduQYNA==","signatures":[{"sig":"MEUCIFeO2V7F8VmOEfmTz1rVVsR9rXsCvsf+oGc6eZ6QPUFyAiEAx2DCnZWVcpQjALYF+is6uTMNE6KNm7QFN5FBeznKf40=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.11.0-nightly-202312061456-a5bf73a","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":533363},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.11.0-nightly-202312061456-a5bf73a.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://try-blocksuite.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: type: z.enum([\n        // @deprecated Subpage is deprecated, use LinkedPage instead\n        'Subpage',\n        'LinkedPage',\n      ]),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n  color: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/e565e270d59b6808dab8a94d7655342f/blocksuite-virgo-0.11.0-nightly-202312061456-a5bf73a.tgz","_integrity":"sha512-vFyR/1Y05b99nBesYv2IqIU9VmpeHBo9Wy6MBg5pP9u3uBWJj3Rp/I4HrNcB5HnA6O9ehMgCQRpcGe6CduQYNA==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.11.0-nightly-202312061456-a5bf73a"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.1.0","yjs":"^13.6.10"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.11.0-nightly-202312061456-a5bf73a_1701874765404_0.5560755472244161","host":"s3://npm-registry-packages"}},"0.11.0-nightly-202312061510-1165d5e":{"name":"@blocksuite/virgo","version":"0.11.0-nightly-202312061510-1165d5e","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.11.0-nightly-202312061510-1165d5e","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"44c172b4e3bc72e018ec365e05779ec8a434f25d","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.11.0-nightly-202312061510-1165d5e.tgz","fileCount":178,"integrity":"sha512-1Jxm54ex18cHyfI4tJDM/gERZGuaWcJxapQYJ6Gn8uZNRBjwzDHQp+MYYeVqbr+tozSWruN3MzWCgO67tSkz/w==","signatures":[{"sig":"MEUCIFJjgUp+1ctxc3Yqbwz856l32GrcIJVJyHcauRXRDU7rAiEAghBKPBGS2gN7gnx6h/uia5HC2TAlJg/JQ+JRCztXf4Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.11.0-nightly-202312061510-1165d5e","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":533363},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.11.0-nightly-202312061510-1165d5e.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://try-blocksuite.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: type: z.enum([\n        // @deprecated Subpage is deprecated, use LinkedPage instead\n        'Subpage',\n        'LinkedPage',\n      ]),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n  color: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/63307d73f64d5b73587b54e57255b621/blocksuite-virgo-0.11.0-nightly-202312061510-1165d5e.tgz","_integrity":"sha512-1Jxm54ex18cHyfI4tJDM/gERZGuaWcJxapQYJ6Gn8uZNRBjwzDHQp+MYYeVqbr+tozSWruN3MzWCgO67tSkz/w==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.11.0-nightly-202312061510-1165d5e"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.1.0","yjs":"^13.6.10"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.11.0-nightly-202312061510-1165d5e_1701908670400_0.8150396315375159","host":"s3://npm-registry-packages"}},"0.11.0-nightly-202312070955-2b5bb47":{"name":"@blocksuite/virgo","version":"0.11.0-nightly-202312070955-2b5bb47","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.11.0-nightly-202312070955-2b5bb47","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"2c33839ed522c191c7148586416767554957db8a","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.11.0-nightly-202312070955-2b5bb47.tgz","fileCount":178,"integrity":"sha512-HSR1RgsZz7LtJYrv3lXbyIicHdXMDK0p2lwROQYHJtgJ08jHcTI6SvKTX/o/C0RgA/JXgEADKgc1Mz9mN7Ku7Q==","signatures":[{"sig":"MEQCIGaod7OdjRLyLFaCEVqMHMZQY0VgpTzBt4aLGiiEQA01AiBoRA24RUOSUZPIwcSYxg94dR1Ex/g5F+iQCHjCgqa/DQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.11.0-nightly-202312070955-2b5bb47","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":533363},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.11.0-nightly-202312070955-2b5bb47.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://try-blocksuite.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: type: z.enum([\n        // @deprecated Subpage is deprecated, use LinkedPage instead\n        'Subpage',\n        'LinkedPage',\n      ]),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n  color: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/dc0ab3ae01b5435f89dde5d47037415f/blocksuite-virgo-0.11.0-nightly-202312070955-2b5bb47.tgz","_integrity":"sha512-HSR1RgsZz7LtJYrv3lXbyIicHdXMDK0p2lwROQYHJtgJ08jHcTI6SvKTX/o/C0RgA/JXgEADKgc1Mz9mN7Ku7Q==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.11.0-nightly-202312070955-2b5bb47"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.1.0","yjs":"^13.6.10"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.11.0-nightly-202312070955-2b5bb47_1701945055258_0.9125534646532176","host":"s3://npm-registry-packages"}},"0.11.0-nightly-202312071711-fde4ce0":{"name":"@blocksuite/virgo","version":"0.11.0-nightly-202312071711-fde4ce0","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.11.0-nightly-202312071711-fde4ce0","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"4d618c320146d3a98ba83c2ff6778500fbb1c4d8","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.11.0-nightly-202312071711-fde4ce0.tgz","fileCount":178,"integrity":"sha512-zRI34V+94wKQUkcyBw5qpXx5HrEJ+I//mkYJnBxqJ4A8RX2Rj+AQTJp/vSsgzvkQB/OCHl/2csVfuXnCnxqYkw==","signatures":[{"sig":"MEQCIFqy5+iohKS7iAmmAOkxvMoVtY780eY0Qey+6UOFeCdtAiB23nGVbmscvXJPLuqRVlyBe+TtyRd0TTDlj+wzi9YKWw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.11.0-nightly-202312071711-fde4ce0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":533363},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.11.0-nightly-202312071711-fde4ce0.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://try-blocksuite.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: type: z.enum([\n        // @deprecated Subpage is deprecated, use LinkedPage instead\n        'Subpage',\n        'LinkedPage',\n      ]),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n  color: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/49518d65bc9b2766983ae3e3fd900882/blocksuite-virgo-0.11.0-nightly-202312071711-fde4ce0.tgz","_integrity":"sha512-zRI34V+94wKQUkcyBw5qpXx5HrEJ+I//mkYJnBxqJ4A8RX2Rj+AQTJp/vSsgzvkQB/OCHl/2csVfuXnCnxqYkw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"9.8.1","description":"A micro editor.","directories":{},"_nodeVersion":"18.18.2","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.11.0-nightly-202312071711-fde4ce0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.1.0","yjs":"^13.6.10"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.11.0-nightly-202312071711-fde4ce0_1701995092723_0.3680688399206169","host":"s3://npm-registry-packages"}},"0.11.0-nightly-202312080949-82627a4":{"name":"@blocksuite/virgo","version":"0.11.0-nightly-202312080949-82627a4","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.11.0-nightly-202312080949-82627a4","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"0e9d495482fa1936b36f583d371a65d443c12818","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.11.0-nightly-202312080949-82627a4.tgz","fileCount":178,"integrity":"sha512-KWjnyMzagiljBvgRlFKL0+Q66ygOqkj4FaxV21RE0WIzmJBdomDjQ1xEiPaOPpeIahK1BBRcUCn9CgsXFpwP/g==","signatures":[{"sig":"MEUCIQCbolIO+kYeoaYcaTlqUdsnob1P38UQTS+iSYSEtIZRcgIgAaYKBubTuAFc5LacdR5/vRZE80aOhPhV5eOyHgHLRik=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.11.0-nightly-202312080949-82627a4","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":533363},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.11.0-nightly-202312080949-82627a4.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://try-blocksuite.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: type: z.enum([\n        // @deprecated Subpage is deprecated, use LinkedPage instead\n        'Subpage',\n        'LinkedPage',\n      ]),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n  color: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/406316e19c6f86e55e5c5328cd5c0f62/blocksuite-virgo-0.11.0-nightly-202312080949-82627a4.tgz","_integrity":"sha512-KWjnyMzagiljBvgRlFKL0+Q66ygOqkj4FaxV21RE0WIzmJBdomDjQ1xEiPaOPpeIahK1BBRcUCn9CgsXFpwP/g==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"10.2.3","description":"A micro editor.","directories":{},"_nodeVersion":"18.19.0","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.11.0-nightly-202312080949-82627a4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.1.0","yjs":"^13.6.10"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.11.0-nightly-202312080949-82627a4_1702081462644_0.4972555903702123","host":"s3://npm-registry-packages"}},"0.11.0-nightly-202312091235-1f4dee4":{"name":"@blocksuite/virgo","version":"0.11.0-nightly-202312091235-1f4dee4","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.11.0-nightly-202312091235-1f4dee4","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"f3524640494d1c88e0e1061233bcda599391f3ab","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.11.0-nightly-202312091235-1f4dee4.tgz","fileCount":178,"integrity":"sha512-o4PZK7f7j/ZPlNyaqsd1WiODUFN47IqfW1+lYlZFVbPdkQpIK0Zuac2rXcs9XSKfySg8ZUn8p4yG0AXapZ6XyQ==","signatures":[{"sig":"MEQCIFihpFqCXD2aGSBe4Kd/2kD2S9cLV4XEw3lx5Q3EdhEsAiAgOgnsnEjEcQ3rz+JGzK5CfIHFWiq0XXz420C3j4AFSA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.11.0-nightly-202312091235-1f4dee4","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":533363},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.11.0-nightly-202312091235-1f4dee4.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://try-blocksuite.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: type: z.enum([\n        // @deprecated Subpage is deprecated, use LinkedPage instead\n        'Subpage',\n        'LinkedPage',\n      ]),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n  color: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/b1298ff432d89318b7545324e9a1501c/blocksuite-virgo-0.11.0-nightly-202312091235-1f4dee4.tgz","_integrity":"sha512-o4PZK7f7j/ZPlNyaqsd1WiODUFN47IqfW1+lYlZFVbPdkQpIK0Zuac2rXcs9XSKfySg8ZUn8p4yG0AXapZ6XyQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"10.2.3","description":"A micro editor.","directories":{},"_nodeVersion":"18.19.0","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.11.0-nightly-202312091235-1f4dee4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.1.0","yjs":"^13.6.10"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.11.0-nightly-202312091235-1f4dee4_1702168017505_0.5426503984006339","host":"s3://npm-registry-packages"}},"0.11.0-nightly-202312112316-7eb9a0a":{"name":"@blocksuite/virgo","version":"0.11.0-nightly-202312112316-7eb9a0a","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.11.0-nightly-202312112316-7eb9a0a","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"6cda25939417619a6b3a7808ff96fd6b885037a6","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.11.0-nightly-202312112316-7eb9a0a.tgz","fileCount":178,"integrity":"sha512-T8CZzGMaJNxb7u9vk9j4TZnePY2LTvB0b9MYGeq0t5Q6fzyrzRksrcB/JOIgGpMBIuyf8Z+qoCoz2AwsrNzsNQ==","signatures":[{"sig":"MEYCIQDB81Qmo6yZ9IOP936Ry051AWKgP+qHArFl1HvL43bgUAIhAL6D/hpom7rMT1vfD6UmRdqzUO9GajNTyjCTi7UAiNq1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.11.0-nightly-202312112316-7eb9a0a","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":533503},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.11.0-nightly-202312112316-7eb9a0a.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://try-blocksuite.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: type: z.enum([\n        // @deprecated Subpage is deprecated, use LinkedPage instead\n        'Subpage',\n        'LinkedPage',\n      ]),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n  color: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/dbac4deacc7f93d025fdca5bed798ce7/blocksuite-virgo-0.11.0-nightly-202312112316-7eb9a0a.tgz","_integrity":"sha512-T8CZzGMaJNxb7u9vk9j4TZnePY2LTvB0b9MYGeq0t5Q6fzyrzRksrcB/JOIgGpMBIuyf8Z+qoCoz2AwsrNzsNQ==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"10.2.3","description":"A micro editor.","directories":{},"_nodeVersion":"18.19.0","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.11.0-nightly-202312112316-7eb9a0a"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.1.0","yjs":"^13.6.10"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.11.0-nightly-202312112316-7eb9a0a_1702340687282_0.15895974318761574","host":"s3://npm-registry-packages"}},"0.11.0-nightly-202312120309-2b3d2ba":{"name":"@blocksuite/virgo","version":"0.11.0-nightly-202312120309-2b3d2ba","keywords":[],"author":{"name":"toeverything"},"license":"MPL-2.0","_id":"@blocksuite/virgo@0.11.0-nightly-202312120309-2b3d2ba","maintainers":[{"name":"lawvs","email":"litusq@gmail.com"},{"name":"doodlewind","email":"doodlewind@gmail.com"}],"homepage":"https://github.com/toeverything/blocksuite#readme","bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"dist":{"shasum":"44a714951e8d3e33072d968cc971f2401e80ccca","tarball":"https://registry.npmjs.org/@blocksuite/virgo/-/virgo-0.11.0-nightly-202312120309-2b3d2ba.tgz","fileCount":178,"integrity":"sha512-YhS5JhT8tgCL9VzE0EhZREBoM9RnCUoGsytLR+b7lcSPokOecmlyiAOuXxxzjvEvSvqgzKqFwc/w6bdSEUkeaw==","signatures":[{"sig":"MEQCIGDcrFDF9bJba9cJXmdgkhPNX7mW4P8hu/WXIO5aLOPHAiAfbylEPcX0iOIuI+QZbUPURsTq/RPzIKMoewU6LiwYsw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blocksuite%2fvirgo@0.11.0-nightly-202312120309-2b3d2ba","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":533503},"main":"dist/index.js","type":"module","_from":"file:blocksuite-virgo-0.11.0-nightly-202312120309-2b3d2ba.tgz","types":"dist/index.d.ts","readme":"# `@blocksuite/virgo`\n\n## Introduction\n\nVirgo is a streamlined rich-text editing core that seamlessly synchronizes the state between DOM and [Y.Text](https://docs.yjs.dev/api/shared-types/y.text). What sets it apart from other rich-text editing frameworks is its natively CRDT data model. For comparison, if you want collaborative editing in Slate.js, you'd typically use a plugin like slate-yjs, which acts as a bridge between [Yjs](https://github.com/yjs/yjs) and Slate.js. Within these plugins, all text operations must be translated between Yjs and Slate.js operations, potentially complicating undo/redo functionalities and code maintenance. With Virgo, the synchronization between Yjs and DOM is direct. This means Yjs's state is the singular source of truth, allowing for direct manipulation of the DOM state via the `Y.Text` API, which considerably reduces the editor's complexity.\n\nIn BlockSuite, we initially employed Quill for in-block rich-text editing, leveraging only a limited subset of its APIs. Each paragraph in BlockSuite was managed by an individual Quill instance, linked to a `Y.Text` instance for collaborative purposes. Virgo further simplifies this, performing the same function as our usage of the Quill subset. It essentially offers a straightforward rich-text synchronization process, with block-tree-level state management being taken care of by BlockSuite's data store.\n\nThe Virgo editor's state is compatible with `Y.Text`, simplifying the conversion between them. Virgo uses the Delta format, similar to Yjs, allowing Yjs to manage all text states, including formatting.\n\n## Usage\n\nTo use Virgo in your project, all you need to do is to create a `Y.Text` instance from `Y.Doc`, bind it to the virgo editor, then mount it to the DOM:\n\n```ts\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou can go to [virgo playground](https://try-blocksuite.vercel.app/examples/virgo/)\nfor online testing and check out the code in its [repository](https://github.com/toeverything/blocksuite/tree/master/packages/playground/examples/virgo).\n\n### Attributes\n\nAttributes is a property of a delta structure, which is used to store formatting information.\nA delta expressing a bold text node would look like this:\n\n```json\n{\n  \"insert\": \"Hello World\",\n  \"attributes\": {\n    \"bold\": true\n  }\n}\n```\n\nVirgo use zod to validate attributes, you can use `setAttributesSchema` to set the schema:\n\n```ts\n// you don't have to extend baseTextAttributes\nconst customSchema = baseTextAttributes.extend({\n  reference: z\n    .object({\n      type: type: z.enum([\n        // @deprecated Subpage is deprecated, use LinkedPage instead\n        'Subpage',\n        'LinkedPage',\n      ]),\n      pageId: z.string(),\n    })\n    .optional()\n    .nullable()\n    .catch(undefined),\n  background: z.string().optional().nullable().catch(undefined),\n  color: z.string().optional().nullable().catch(undefined),\n});\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributesSchema(customSchema);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nVirgo has default attributes schema, so you can skip this step if you think it is enough.\n\n```ts\n// default attributes schema\nconst baseTextAttributes = z.object({\n  bold: z.literal(true).optional().nullable().catch(undefined),\n  italic: z.literal(true).optional().nullable().catch(undefined),\n  underline: z.literal(true).optional().nullable().catch(undefined),\n  strike: z.literal(true).optional().nullable().catch(undefined),\n  code: z.literal(true).optional().nullable().catch(undefined),\n  link: z.string().optional().nullable().catch(undefined),\n});\n```\n\n### Attributes Renderer\n\nAttributes Renderer is a function that takes a delta and returns `TemplateResult<1>`, which is a valid [lit-html](https://github.com/lit/lit/tree/main/packages/lit-html) template result.\nVirgo use this function to render text with custom format and it is also the way to customize the text render.\n\n```ts\ntype AffineTextAttributes = {\n  // your custom attributes\n};\n\nconst attributeRenderer: AttributeRenderer<AffineTextAttributes> = (\n  delta,\n  // you can use `selected` to check if the text node is selected\n  selected\n) => {\n  // generate style from delta\n  return html`<span style=${style}\n    ><v-text .str=${delta.insert}></v-text\n  ></span>`;\n};\n\nconst doc = new Y.Doc();\nconst yText = doc.getText('text');\nconst vEditor = new VEditor(yText);\nvEditor.setAttributeRenderer(attributeRenderer);\n\nconst editorContainer = document.getElementById('editor');\nvEditor.mount(editorContainer);\n```\n\nYou will see there is a `v-text` in the template, it is a custom element that render text node.\nVirgo use them to calculate range so you have to use them to render text content from delta.\n\n### Rich Text\n\nIf you find Virgo's features too limited or difficult to use, you can refer to or directly use the [rich-text](https://github.com/toeverything/blocksuite/blob/f71df00ce18e3f300caad914aaedf63267158885/packages/blocks/src/components/rich-text/rich-text.ts) encapsulated in the blocks package. It contains basic editing features like copy/cut/paste, undo/redo (including range restore).\n","exports":{".":"./dist/index.js","./*":"./dist/*.js"},"scripts":{"test":"pnpm test:unit && pnpm test:e2e","build":"tsc","test:e2e":"playwright test","test:unit":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest run --coverage"},"_npmUser":{"name":"doodlewind","email":"doodlewind@gmail.com"},"_resolved":"/tmp/b86a0d052dfc795d2e8c06e2db3efc0b/blocksuite-virgo-0.11.0-nightly-202312120309-2b3d2ba.tgz","_integrity":"sha512-YhS5JhT8tgCL9VzE0EhZREBoM9RnCUoGsytLR+b7lcSPokOecmlyiAOuXxxzjvEvSvqgzKqFwc/w6bdSEUkeaw==","repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"_npmVersion":"10.2.3","description":"A micro editor.","directories":{},"_nodeVersion":"18.19.0","dependencies":{"zod":"^3.22.4","@blocksuite/global":"0.11.0-nightly-202312120309-2b3d2ba"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lit":"^3.1.0","yjs":"^13.6.10"},"peerDependencies":{"lit":"^3.0.2","yjs":"^13"},"_npmOperationalInternal":{"tmp":"tmp/virgo_0.11.0-nightly-202312120309-2b3d2ba_1702350888743_0.9097638948600384","host":"s3://npm-registry-packages"}}},"time":{"created":"2023-01-31T05:37:22.388Z","modified":"2025-06-09T10:42:06.796Z","0.4.0-alpha.0":"2023-01-31T05:37:22.666Z","0.4.0-20230131204452-60bc555":"2023-02-01T00:29:10.845Z","0.4.0-20230201062929-3667cc0":"2023-02-01T06:32:12.824Z","0.4.0-20230201063624-4e0463b":"2023-02-01T06:47:20.489Z","0.4.0-20230201220903-262005c":"2023-02-02T00:25:54.135Z","0.4.0-20230203001426-a8854f1":"2023-02-03T00:26:32.693Z","0.4.0-20230203030233-b22bea7":"2023-02-03T03:05:07.910Z","0.4.0-20230203145315-ce4acef":"2023-02-03T16:07:38.854Z","0.4.0-20230203234453-6122cfe":"2023-02-04T00:24:41.494Z","0.4.0-20230204233304-6e37e29":"2023-02-05T00:28:46.011Z","0.4.0-20230205175611-17a62e3":"2023-02-06T00:24:25.181Z","0.4.0-alpha.2":"2023-02-06T19:38:12.936Z","0.4.0-20230206205011-523956a":"2023-02-07T00:26:53.333Z","0.4.0-20230207201257-d147e8c":"2023-02-08T00:25:32.780Z","0.4.0-20230208200347-b55e9fe":"2023-02-09T00:26:14.023Z","0.4.0-alpha.3":"2023-02-09T06:45:43.513Z","0.4.0-20230209191848-0a912e3":"2023-02-09T19:25:38.542Z","0.4.0-20230209215259-a294751":"2023-02-09T21:56:03.586Z","0.4.0-20230209220133-3a31da9":"2023-02-10T00:27:46.074Z","0.4.0-20230210031655-264744e":"2023-02-10T03:26:08.304Z","0.4.0-20230210193543-bf10cf9":"2023-02-10T19:45:25.912Z","0.4.0-20230210201705-1ce0043":"2023-02-10T20:23:16.351Z","0.4.0-20230210221011-770af02":"2023-02-11T00:22:38.687Z","0.4.0-20230211035417-55e3edb":"2023-02-12T00:28:31.750Z","0.4.0-20230212194855-047e1b9":"2023-02-13T00:27:17.171Z","0.4.0-20230213234455-1a23f69":"2023-02-14T00:27:00.818Z","0.4.0-20230214234726-0f75778":"2023-02-15T00:26:34.858Z","0.4.0-20230215160945-c645720":"2023-02-15T16:53:44.191Z","0.4.0-alpha.4":"2023-02-15T21:44:13.655Z","0.4.0-20230216001322-62f9206":"2023-02-16T00:27:12.345Z","0.4.0-20230216011811-2776d93":"2023-02-16T01:34:37.544Z","0.4.0-20230216093909-90a4996":"2023-02-16T09:46:22.061Z","0.4.0-20230216201306-ed1c8f8":"2023-02-17T00:29:05.689Z","0.4.0-20230217091523-862ef96":"2023-02-17T09:23:31.297Z","0.4.0-20230217095654-a561b36":"2023-02-17T10:01:10.339Z","0.4.0-20230217222321-04d1424":"2023-02-18T00:26:53.368Z","0.4.0":"2023-02-18T14:17:33.570Z","0.4.0-20230218141339-f0c5a7b":"2023-02-19T00:27:15.276Z","0.4.1":"2023-02-19T01:03:53.487Z","0.4.1-20230219164430-614cf52":"2023-02-20T00:29:04.065Z","0.4.1-20230220214107-0a354de":"2023-02-21T00:27:54.245Z","0.4.1-20230221150537-a2a8018":"2023-02-21T15:08:34.258Z","0.4.1-20230221150858-a852e41":"2023-02-21T15:13:55.220Z","0.4.1-20230221160243-d0e05e5":"2023-02-22T00:23:24.946Z","0.4.1-20230223000800-427ad66":"2023-02-23T00:25:29.108Z","0.4.1-20230223195957-963a0ba":"2023-02-24T00:25:25.019Z","0.4.1-20230224181613-0101128":"2023-02-25T00:25:43.170Z","0.4.1-20230225180029-daf8dec":"2023-02-26T00:29:43.659Z","0.4.1-20230226175811-d32fc6d":"2023-02-27T00:26:42.248Z","0.5.0-alpha.0":"2023-02-27T11:20:56.808Z","0.5.0-20230227215422-5b7fc14":"2023-02-28T00:27:57.018Z","0.5.0-20230228075503-02b693a":"2023-02-28T07:59:22.384Z","0.5.0-20230228081715-206ac29":"2023-02-28T08:20:16.792Z","0.5.0-20230228114851-7e82f3e":"2023-03-01T00:30:15.346Z","0.5.0-20230301172958-2384904":"2023-03-02T00:29:35.097Z","0.5.0-20230302104138-788dae4":"2023-03-02T10:52:17.592Z","0.5.0-20230302142916-8e090d3":"2023-03-02T17:15:38.081Z","0.5.0-20230302205056-4385b7a":"2023-03-03T02:04:02.185Z","0.5.0-20230303192351-13b0dd7":"2023-03-03T19:28:13.574Z","0.5.0-20230303194346-1eb65e7":"2023-03-04T00:25:02.018Z","0.5.0-20230304183717-8ea9932":"2023-03-04T18:40:29.803Z","0.5.0-20230304192152-02cfe2b":"2023-03-04T19:25:51.851Z","0.5.0-20230305195734-5878b62":"2023-03-06T00:27:38.476Z","0.5.0-20230306231625-c219ab3":"2023-03-07T00:28:45.172Z","0.5.0-20230307101545-7d5aefc":"2023-03-07T10:19:05.759Z","0.5.0-20230307224400-a4c096e":"2023-03-08T00:28:43.014Z","0.5.0-20230308090832-6594d8d":"2023-03-08T09:12:44.443Z","0.5.0-20230308232548-463df59":"2023-03-09T00:27:05.258Z","0.5.0-20230309082016-5a8e126":"2023-03-09T08:23:02.838Z","0.5.0-alpha.1":"2023-03-09T16:02:56.831Z","0.5.0-20230309172823-10ecf66":"2023-03-10T00:26:44.134Z","0.5.0-20230310062711-a86b71f":"2023-03-10T06:45:53.833Z","0.5.0-20230310090329-2ebbde2":"2023-03-10T09:10:10.102Z","0.5.0-20230310095333-5202fb9":"2023-03-10T09:56:15.510Z","0.5.0-20230310132906-cc38585":"2023-03-11T00:23:01.182Z","0.5.0-20230311151726-8b99e2c":"2023-03-12T00:26:34.662Z","0.5.0-20230312174558-52c15ca":"2023-03-13T00:26:15.297Z","0.5.0-20230313100532-099b92b":"2023-03-13T10:08:59.196Z","0.5.0-20230314083023-ed7a9fd":"2023-03-14T08:53:11.040Z","0.5.0-20230314182044-9df30f4":"2023-03-15T00:26:22.707Z","0.5.0-20230315153039-983040a":"2023-03-16T00:27:11.669Z","0.5.0-20230317001802-ebd1fa9":"2023-03-17T00:25:49.834Z","0.5.0-20230317014705-a881b9c":"2023-03-17T01:49:52.363Z","0.5.0-20230317123153-8e8266b":"2023-03-18T00:24:40.230Z","0.5.0-20230318175000-60fb620":"2023-03-19T00:28:36.495Z","0.5.0-20230319043029-75173db":"2023-03-19T07:52:23.936Z","0.5.0-20230319195556-f2e3c52":"2023-03-20T00:26:40.745Z","0.5.0-20230320034723-8dfc65e":"2023-03-20T03:50:15.973Z","0.5.0-20230320070546-078e5d9":"2023-03-20T07:09:59.788Z","0.5.0-20230320164115-e612d17":"2023-03-21T00:24:49.932Z","0.5.0-20230321222249-433f06e":"2023-03-22T00:22:49.569Z","0.5.0-20230322104334-714fb62":"2023-03-23T00:26:45.724Z","0.5.0-20230323032255-e75ed32":"2023-03-23T03:27:27.202Z","0.5.0-20230323085636-3110abb":"2023-03-23T09:00:35.307Z","0.5.0-20230323171535-bb95311":"2023-03-24T00:24:23.933Z","0.5.0-20230324040005-14417c2":"2023-03-24T04:12:40.781Z","0.5.0-20230324145140-41b55b4":"2023-03-25T00:23:36.600Z","0.5.0-20230325162440-97027e3":"2023-03-26T00:26:49.356Z","0.5.0-20230326033652-70ca43c":"2023-03-27T00:24:43.570Z","0.5.0-alpha.2":"2023-04-04T06:06:34.330Z","0.5.0-20230404060355-e26ee252":"2023-04-04T06:09:59.002Z","0.0.0-20230404211759-4cf51928":"2023-04-04T21:21:03.160Z","0.0.0-20230405153006-9483b657":"2023-04-05T15:37:06.261Z","0.0.0-20230405154041-de2f96d3":"2023-04-06T00:23:04.383Z","0.0.0-20230406032111-01cf598b-nightly":"2023-04-06T04:01:06.125Z","0.0.0-20230406182220-0e8dac41-nightly":"2023-04-07T00:22:35.422Z","0.0.0-20230407050457-3cd70505-nightly":"2023-04-07T07:08:22.808Z","0.0.0-20230407072653-ba36ca29-nightly":"2023-04-07T07:30:11.178Z","0.0.0-20230407131929-c9a6bb18-nightly":"2023-04-08T00:22:54.691Z","0.0.0-20230408172438-a2855a6e-nightly":"2023-04-09T00:25:43.907Z","0.0.0-20230409084303-221991d4-nightly":"2023-04-10T00:25:20.074Z","0.0.0-20230410103618-089e5b37-nightly":"2023-04-11T00:24:38.807Z","0.5.0-alpha.3":"2023-04-11T04:53:16.930Z","0.0.0-20230411141436-ec6b051d-nightly":"2023-04-11T14:18:36.090Z","0.0.0-20230411151359-929de326-nightly":"2023-04-12T00:24:37.933Z","0.0.0-20230412041719-76e5b5b9-nightly":"2023-04-12T04:58:49.517Z","0.0.0-20230412114309-05fc8eec-nightly":"2023-04-13T00:22:50.316Z","0.0.0-20230413112150-e058f87e-nightly":"2023-04-13T13:41:07.267Z","0.0.0-20230413190748-4d32b79a-nightly":"2023-04-14T00:23:11.825Z","0.0.0-20230414143749-f98f3e94-nightly":"2023-04-15T00:26:13.967Z","0.0.0-20230416000648-f322ab85-nightly":"2023-04-16T00:25:40.394Z","0.0.0-20230416194015-c6ae6f0f-nightly":"2023-04-17T00:24:05.084Z","0.0.0-20230417100332-c673f663-nightly":"2023-04-18T00:23:42.343Z","0.0.0-20230418192708-038c287a-nightly":"2023-04-19T00:25:37.350Z","0.0.0-20230419181152-90833057-nightly":"2023-04-19T18:16:18.786Z","0.0.0-20230419181455-be5e9007-nightly":"2023-04-19T18:18:22.604Z","0.0.0-20230419082004-ba4cb881-nightly":"2023-04-20T00:24:08.652Z","0.0.0-20230419224531-580687ea-nightly":"2023-04-20T02:05:20.328Z","0.0.0-20230420021507-17b3de01-nightly":"2023-04-20T02:20:12.357Z","0.0.0-20230420032755-9499a5df-nightly":"2023-04-20T03:32:29.737Z","0.0.0-20230420033423-a474fdef-nightly":"2023-04-20T03:37:43.275Z","0.0.0-20230420034403-72a706b3-nightly":"2023-04-20T03:48:49.921Z","0.0.0-20230420040504-2cbea2d3-nightly":"2023-04-20T04:08:54.475Z","0.0.0-20230420041641-17d0b170-nightly":"2023-04-20T04:19:50.950Z","0.0.0-20230420045705-6253d7b9-nightly":"2023-04-20T05:01:55.861Z","0.0.0-20230420050902-d9ba4793-nightly":"2023-04-20T05:12:04.069Z","0.0.0-20230420051213-c7ac2850-nightly":"2023-04-20T05:15:22.491Z","0.0.0-20230420052205-f8710675-nightly":"2023-04-20T05:25:45.665Z","0.0.0-20230420053507-ac78edf2-nightly":"2023-04-20T05:39:16.847Z","0.0.0-20230420060121-36f39072-nightly":"2023-04-20T06:05:02.228Z","0.0.0-20230420061122-b8699818-nightly":"2023-04-20T06:17:17.471Z","0.0.0-20230420070517-e32016cd-nightly":"2023-04-20T07:09:27.336Z","0.0.0-20230420070759-dbe39fdf-nightly":"2023-04-20T07:10:23.484Z","0.0.0-20230420160324-857b396c-nightly":"2023-04-20T16:08:03.433Z","0.0.0-20230420194752-2980755e-nightly":"2023-04-20T19:50:44.231Z","0.0.0-20230420210727-85b7de79-nightly":"2023-04-21T00:23:59.444Z","0.0.0-20230421132835-1c52a918-nightly":"2023-04-22T00:23:56.479Z","0.0.0-20230422015719-7b64b527-nightly":"2023-04-22T01:59:55.994Z","0.5.0-alpha.4":"2023-04-22T02:07:42.915Z","0.0.0-20230422231131-3de18e87-nightly":"2023-04-23T00:25:52.006Z","0.0.0-20230423223855-b6c34d9e-nightly":"2023-04-24T00:25:26.610Z","0.0.0-20230424194949-ff9cc9dd-nightly":"2023-04-25T00:23:53.656Z","0.5.0":"2023-04-25T16:44:26.799Z","0.0.0-20230425164216-4b5fafd7-nightly":"2023-04-26T00:24:29.843Z","0.0.0-20230426054154-cbe3dbce-nightly":"2023-04-26T06:31:00.382Z","0.0.0-20230426131617-7a934ba6-nightly":"2023-04-27T00:26:24.801Z","0.0.0-20230427041825-7fff957d-nightly":"2023-04-27T04:35:22.865Z","0.0.0-20230427114705-ffcc5be0-nightly":"2023-04-28T00:25:36.269Z","0.0.0-20230428070346-4bed88f0-nightly":"2023-04-28T07:08:11.040Z","0.0.0-20230428133133-9f290178-nightly":"2023-04-29T00:23:26.395Z","0.0.0-20230429153208-4ac043ec-nightly":"2023-04-30T00:26:35.613Z","0.0.0-20230430074810-e05a7cd0-nightly":"2023-05-01T00:25:36.891Z","0.0.0-20230501021333-90d9a4af-nightly":"2023-05-02T00:23:40.751Z","0.0.0-20230502232311-bfe52748-nightly":"2023-05-03T00:23:23.641Z","0.0.0-20230503040956-5c49643f-nightly":"2023-05-04T00:23:52.816Z","0.0.0-20230504140113-3a4b0abb-nightly":"2023-05-05T00:23:36.856Z","0.0.0-20230505225643-03f75e5e-nightly":"2023-05-06T00:22:19.619Z","0.0.0-20230506085552-66fcf3a2-nightly":"2023-05-07T00:25:39.438Z","0.0.0-20230507142042-29bc8617-nightly":"2023-05-08T00:23:17.318Z","0.0.0-20230508043859-34d0cc68-nightly":"2023-05-08T04:41:41.874Z","0.0.0-20230508161503-04475f67-nightly":"2023-05-09T00:24:41.201Z","0.0.0-20230509052644-b8b1b6a1-nightly":"2023-05-09T05:48:33.609Z","0.0.0-20230509150141-055b5702-nightly":"2023-05-10T00:24:03.786Z","0.0.0-20230510195934-c3adecb7-nightly":"2023-05-11T00:23:19.284Z","0.0.0-20230511150844-c344a2b3-nightly":"2023-05-11T22:01:44.108Z","0.0.0-20230512070537-44e59e48-nightly":"2023-05-12T18:52:03.507Z","0.0.0-20230512192655-e61e272b-nightly":"2023-05-12T19:37:10.459Z","0.0.0-20230513043625-a1548207-nightly":"2023-05-14T00:26:36.420Z","0.0.0-20230514141009-705c0fac-nightly":"2023-05-15T00:25:15.578Z","0.0.0-20230515135743-254e8c10-nightly":"2023-05-16T00:23:59.899Z","0.0.0-20230516150657-31efbf21-nightly":"2023-05-17T00:26:28.164Z","0.0.0-20230517071334-40b6a07f-nightly":"2023-05-17T09:23:34.997Z","0.0.0-20230517102216-36bda4ab-nightly":"2023-05-17T10:26:29.586Z","0.0.0-20230518050717-68d6871b-nightly":"2023-05-18T05:10:32.990Z","0.0.0-20230518051344-45970a96-nightly":"2023-05-18T05:17:19.028Z","0.0.0-20230518132640-c31abed2-nightly":"2023-05-19T00:24:33.544Z","0.0.0-20230519064753-1a553313-nightly":"2023-05-19T06:50:42.616Z","0.0.0-20230519102837-01acd96b-nightly":"2023-05-20T00:24:02.640Z","0.0.0-20230522085150-18e83864-nightly":"2023-05-23T00:24:57.774Z","0.0.0-20230523113844-e23384f1-nightly":"2023-05-24T00:24:07.862Z","0.0.0-20230524232247-8c175b40-nightly":"2023-05-25T00:23:22.269Z","0.0.0-20230525011821-20259c76-nightly":"2023-05-25T02:02:35.138Z","0.0.0-20230525072216-d4cc19b1-nightly":"2023-05-25T07:49:42.683Z","0.0.0-20230525112306-4e165666-nightly":"2023-05-25T14:00:05.240Z","0.0.0-20230526010315-e1d4bf97-nightly":"2023-05-26T02:01:59.317Z","0.0.0-20230526024755-74df4d56-nightly":"2023-05-26T02:51:04.126Z","0.0.0-20230526105510-0350c2c0-nightly":"2023-05-27T00:26:31.830Z","0.0.0-20230527155447-cef80420-nightly":"2023-05-28T00:26:58.943Z","0.0.0-20230529063116-9927a75a-nightly":"2023-05-29T06:50:29.106Z","0.0.0-20230529073717-06f81074-nightly":"2023-05-29T07:42:25.520Z","0.0.0-20230529075358-c0eb6564-nightly":"2023-05-29T07:56:55.447Z","0.0.0-20230529085908-d3d4c1a3-nightly":"2023-05-29T09:07:44.841Z","0.0.0-20230529102007-5ac37643-nightly":"2023-05-29T10:31:14.335Z","0.0.0-20230529110357-2729de93-nightly":"2023-05-29T11:28:15.212Z","0.0.0-20230529210748-ab9952ba-nightly":"2023-05-30T00:27:29.442Z","0.0.0-20230530061436-d0702cc0-nightly":"2023-05-30T06:29:07.867Z","0.0.0-20230530101649-463577c2-nightly":"2023-05-31T00:26:56.041Z","0.0.0-20230531040027-44cd9d8e-nightly":"2023-05-31T04:09:12.429Z","0.0.0-20230531071546-a544414b-nightly":"2023-05-31T07:36:26.923Z","0.0.0-20230531074909-e951a818-nightly":"2023-05-31T07:52:03.252Z","0.0.0-20230531080915-ca9c55a2-nightly":"2023-05-31T08:24:12.938Z","0.0.0-20230531101553-3854a14c-nightly":"2023-06-01T00:33:09.663Z","0.0.0-20230601062752-68dbf1a4-nightly":"2023-06-01T06:31:29.221Z","0.0.0-20230601101714-0d24ba91-nightly":"2023-06-01T10:21:56.933Z","0.0.0-20230601122821-16196c35-nightly":"2023-06-02T00:27:30.414Z","0.0.0-20230602020342-81b4c523-nightly":"2023-06-02T08:58:28.263Z","0.0.0-20230602102854-1b6ffa69-nightly":"2023-06-03T00:26:19.546Z","0.0.0-20230604040121-4ab99587-nightly":"2023-06-04T04:05:51.307Z","0.0.0-20230605133755-4f79f942-nightly":"2023-06-06T00:27:27.048Z","0.6.0":"2023-06-06T12:08:41.891Z","0.0.0-20230606130340-805f430b-nightly":"2023-06-07T00:27:56.424Z","0.0.0-20230607055421-9b20fcaf-nightly":"2023-06-08T00:27:56.878Z","0.0.0-20230608095252-955ad210-nightly":"2023-06-09T00:30:17.244Z","0.0.0-20230609234901-5daa1a6e-nightly":"2023-06-10T00:26:25.912Z","0.0.0-20230610155623-6fd80ccc-nightly":"2023-06-11T00:30:00.218Z","0.0.0-20230611085524-052ecf3f-nightly":"2023-06-12T00:29:09.532Z","0.0.0-20230612125018-7c0d765d-nightly":"2023-06-13T00:27:16.173Z","0.0.0-20230613061606-d9b96e14-nightly":"2023-06-13T06:20:37.896Z","0.0.0-20230613142146-d72d4600-nightly":"2023-06-14T00:26:02.772Z","0.0.0-20230614221433-c1402d96-nightly":"2023-06-15T00:28:20.010Z","0.0.0-20230615114854-2b927ab5-nightly":"2023-06-16T00:28:20.513Z","0.0.0-20230616172700-720da7d7-nightly":"2023-06-17T00:25:57.738Z","0.0.0-20230617112728-96046bd8-nightly":"2023-06-18T00:30:49.574Z","0.0.0-20230618093321-05c37038-nightly":"2023-06-19T00:27:52.200Z","0.0.0-20230619093341-b1b8714a-nightly":"2023-06-20T00:26:20.771Z","0.0.0-20230620053632-def836c5-nightly":"2023-06-20T06:24:13.229Z","0.0.0-20230620110032-d8041266-nightly":"2023-06-20T11:12:20.312Z","0.0.0-20230620132953-c8a7dfc3-nightly":"2023-06-21T00:30:56.754Z","0.0.0-20230621121334-ea56da5c-nightly":"2023-06-21T14:31:54.279Z","0.0.0-20230622044943-68a3188d-nightly":"2023-06-22T04:53:55.336Z","0.0.0-20230622140410-30eb2b91-nightly":"2023-06-23T00:32:21.057Z","0.0.0-20230623185501-1697f9ce-nightly":"2023-06-24T00:30:46.288Z","0.0.0-20230624133730-3d47c8c8-nightly":"2023-06-24T13:41:00.863Z","0.0.0-20230624135813-f26651e5-nightly":"2023-06-24T14:01:49.446Z","0.0.0-20230624145145-2fc312f1-nightly":"2023-06-24T14:54:49.389Z","0.0.0-20230624151714-10e3e0be-nightly":"2023-06-24T15:20:37.956Z","0.0.0-20230624163241-751f7170-nightly":"2023-06-24T16:39:17.042Z","0.0.0-20230626181619-90507cfc-nightly":"2023-06-27T00:30:00.132Z","0.0.0-20230627102054-b712dd6c-nightly":"2023-06-27T10:41:59.949Z","0.0.0-20230627154918-4c642938-nightly":"2023-06-27T15:57:56.114Z","0.0.0-20230627165830-836e6fd1-nightly":"2023-06-27T17:02:15.223Z","0.0.0-20230628134028-bff5cb08-nightly":"2023-06-28T20:15:48.900Z","0.0.0-20230629084521-542de4e8-nightly":"2023-06-29T09:02:42.125Z","0.0.0-20230629103121-76e6587d-nightly":"2023-06-30T00:30:26.901Z","0.0.0-20230630081054-55a25248-nightly":"2023-06-30T08:14:37.566Z","0.0.0-20230701000557-1e62fe40-nightly":"2023-07-01T00:33:04.703Z","0.0.0-20230702013906-50f93499-nightly":"2023-07-02T06:13:26.298Z","0.0.0-20230703162815-336f855b-nightly":"2023-07-04T00:30:38.530Z","0.0.0-20230704023331-d9fc4854-nightly":"2023-07-04T06:10:22.022Z","0.0.0-20230704115754-19bc6fae-nightly":"2023-07-04T16:56:32.784Z","0.0.0-20230705042827-ff88aee4-nightly":"2023-07-05T05:47:28.001Z","0.0.0-20230705060316-3f52aee9-nightly":"2023-07-05T06:11:40.943Z","0.0.0-20230705162600-2cb608e4-nightly":"2023-07-06T00:31:27.999Z","0.0.0-20230706100805-4dd03db9-nightly":"2023-07-06T10:23:43.031Z","0.0.0-20230706133626-e59dda07-nightly":"2023-07-07T00:30:43.323Z","0.0.0-20230707101710-90a6e5e4-nightly":"2023-07-08T00:30:03.777Z","0.0.0-20230708145134-cac23f63-nightly":"2023-07-09T00:34:37.015Z","0.0.0-20230710082350-3a26a731-nightly":"2023-07-10T11:20:07.498Z","0.0.0-20230710180251-cc217754-nightly":"2023-07-11T00:28:39.675Z","0.0.0-20230711013419-0b07ee2d-nightly":"2023-07-11T03:15:56.369Z","0.0.0-20230711103520-ce18dd84-nightly":"2023-07-12T00:32:52.289Z","0.0.0-20230712103008-d60b6475-nightly":"2023-07-12T10:34:04.353Z","0.0.0-20230712111942-2ffb8985-nightly":"2023-07-12T11:41:39.049Z","0.0.0-20230712133952-834fa060-nightly":"2023-07-12T15:10:04.913Z","0.0.0-20230713062147-9eb7708c-nightly":"2023-07-13T06:27:30.920Z","0.0.0-20230713131127-200a0dc1-nightly":"2023-07-13T15:33:42.041Z","0.0.0-20230713173440-3405aaae-nightly":"2023-07-14T00:31:12.416Z","0.0.0-20230714140010-e7345948-nightly":"2023-07-15T00:31:44.682Z","0.0.0-20230715003621-9e2981bf-nightly":"2023-07-16T00:33:41.800Z","0.0.0-20230716144121-5b169b38-nightly":"2023-07-16T14:45:19.452Z","0.0.0-20230717055529-79180930-nightly":"2023-07-17T05:59:40.823Z","0.7.0":"2023-07-17T16:03:13.166Z","0.0.0-20230717160948-0ea73274-nightly":"2023-07-18T00:49:52.324Z","0.0.0-20230718155514-65ea63b4-nightly":"2023-07-19T00:44:28.307Z","0.0.0-20230719163314-76d863fc-nightly":"2023-07-20T00:29:25.058Z","0.0.0-20230720161412-7c6791e1-nightly":"2023-07-21T00:27:16.937Z","0.0.0-20230721134812-6e0e3bef-nightly":"2023-07-22T00:28:36.229Z","0.0.0-20230722125003-4c0d3989-nightly":"2023-07-23T00:30:12.058Z","0.0.0-20230723041323-29ce5d2f-nightly":"2023-07-24T00:28:48.516Z","0.0.0-20230724154746-52953d6c-nightly":"2023-07-25T00:28:18.655Z","0.0.0-20230725170625-d6366e35-nightly":"2023-07-26T00:27:51.647Z","0.0.0-20230721082237-0193726a-nightly":"2023-07-26T03:50:43.078Z","0.0.0-20230725102342-95a6b7e1-nightly":"2023-07-26T07:19:28.300Z","0.0.0-20230726225156-e7b23c54-nightly":"2023-07-27T00:25:38.129Z","0.0.0-20230725102342-7fa145e5-nightly":"2023-07-27T04:53:47.350Z","0.0.0-20230720073515-bea92e0f-nightly":"2023-07-27T05:11:44.059Z","0.0.0-20230727170546-19a35248-nightly":"2023-07-28T00:26:06.562Z","0.0.0-20230728070629-420286ba-nightly":"2023-07-28T07:19:18.959Z","0.0.0-20230728071745-19d2e107-nightly":"2023-07-28T08:29:14.017Z","0.0.0-20230728114738-06c5d8e7-nightly":"2023-07-29T00:25:36.827Z","0.0.0-20230729011742-613f3782-nightly":"2023-07-29T01:28:19.555Z","0.0.0-20230729103040-e9812509-nightly":"2023-07-30T00:29:21.088Z","0.0.0-20230730071529-580daeb9-nightly":"2023-07-31T00:27:26.759Z","0.0.0-20230731024839-382e9155-nightly":"2023-07-31T07:03:13.573Z","0.0.0-20230731152415-fdd3d9b0-nightly":"2023-07-31T18:25:33.797Z","0.0.0-20230731210752-161a8f85-nightly":"2023-08-01T00:30:46.617Z","0.0.0-20230801164049-94862d4d-nightly":"2023-08-02T00:26:29.500Z","0.0.0-20230802170305-bdf398b9-nightly":"2023-08-02T17:08:18.521Z","0.0.0-20230802182240-90c09b2e-nightly":"2023-08-02T18:26:32.870Z","0.0.0-20230802184949-6ba78273-nightly":"2023-08-02T18:53:13.333Z","0.0.0-20230802200139-381599c0-nightly":"2023-08-02T20:05:32.040Z","0.0.0-20230803131414-1e504e17-nightly":"2023-08-04T00:27:54.021Z","0.0.0-20230804013018-286d1a51-nightly":"2023-08-04T01:51:27.000Z","0.0.0-20230804034223-6b97c3b7-nightly":"2023-08-04T04:13:45.876Z","0.0.0-20230804134340-34d14df8-nightly":"2023-08-04T17:40:57.158Z","0.0.0-20230804190636-37f66904-nightly":"2023-08-04T19:11:02.610Z","0.0.0-20230805071237-d2d41549-nightly":"2023-08-06T00:25:22.995Z","0.0.0-20230806233219-17ca6eee-nightly":"2023-08-07T00:24:01.989Z","0.0.0-20230807164933-9f6fb698-nightly":"2023-08-08T00:27:03.539Z","0.0.0-20230808052934-e80a740d-nightly":"2023-08-08T05:40:05.568Z","0.0.0-20230808131052-ef3445a9-nightly":"2023-08-08T15:19:12.050Z","0.0.0-20230808153317-1779f7fe-nightly":"2023-08-09T00:29:14.051Z","0.0.0-20230809030546-32e6e21d-nightly":"2023-08-09T03:17:48.577Z","0.0.0-20230809173434-253855dd-nightly":"2023-08-10T00:27:11.339Z","0.0.0-20230810005427-25adb757-nightly":"2023-08-10T01:24:55.427Z","0.0.0-20230810154852-8a8eccea-nightly":"2023-08-10T15:54:36.303Z","0.0.0-20230811012734-9620bf0b-nightly":"2023-08-11T01:35:30.724Z","0.0.0-20230811080927-c830f4d4-nightly":"2023-08-11T08:15:29.776Z","0.0.0-20230811201552-f37162ea-nightly":"2023-08-11T20:21:18.179Z","0.0.0-20230811212833-5be585ee-nightly":"2023-08-12T00:22:10.631Z","0.0.0-20230812155032-911b0176-nightly":"2023-08-13T00:25:13.038Z","0.0.0-20230814000457-ce469d9b-nightly":"2023-08-14T00:24:59.104Z","0.0.0-20230814155455-ceb5d5d8-nightly":"2023-08-14T18:05:59.390Z","0.0.0-20230815165042-01c49091-nightly":"2023-08-15T17:52:01.158Z","0.0.0-20230815234451-afff0017-nightly":"2023-08-16T00:22:24.388Z","0.0.0-20230816045733-6ec53493-nightly":"2023-08-16T05:51:22.457Z","0.0.0-20230816061955-2d98f0fc-nightly":"2023-08-16T06:28:48.815Z","0.0.0-20230816070819-d8ef2663-nightly":"2023-08-16T07:14:19.379Z","0.0.0-20230816072739-2ecb84eb-nightly":"2023-08-16T07:30:53.721Z","0.0.0-20230816080418-bdf43f08-nightly":"2023-08-16T08:08:18.879Z","0.0.0-20230816084758-3be96d22-nightly":"2023-08-16T08:50:49.633Z","0.0.0-20230816192550-eeb137dd-nightly":"2023-08-17T00:22:39.821Z","0.0.0-20230817030423-20f3821a-nightly":"2023-08-17T03:10:51.236Z","0.0.0-20230817172832-20c2b2a5-nightly":"2023-08-17T17:54:03.232Z","0.0.0-20230817195259-240310af-nightly":"2023-08-18T00:21:44.732Z","0.0.0-20230818013242-eb8ae5f4-nightly":"2023-08-18T01:54:21.326Z","0.0.0-20230818021533-7e342436-nightly":"2023-08-18T02:21:09.071Z","0.0.0-20230818051219-f0dac47e-nightly":"2023-08-18T05:31:39.832Z","0.0.0-20230818053411-bc330b35-nightly":"2023-08-18T05:37:03.714Z","0.0.0-20230818163111-fc91dac8-nightly":"2023-08-19T00:21:07.143Z","0.0.0-20230819115528-2375022b-nightly":"2023-08-20T00:06:24.727Z","0.0.0-20230820215847-d7777c6f-nightly":"2023-08-21T00:22:17.677Z","0.0.0-20230821003714-6c9c5137-nightly":"2023-08-21T00:47:43.324Z","0.0.0-20230821045124-712e6c3d-nightly":"2023-08-21T05:06:30.974Z","0.0.0-20230821151132-2bd0c7f6-nightly":"2023-08-21T23:40:11.614Z","0.0.0-20230822202122-dba33658-nightly":"2023-08-22T20:23:45.028Z","0.0.0-20230822213853-1f5515ca-nightly":"2023-08-22T21:41:31.419Z","0.0.0-20230822230555-98129627-nightly":"2023-08-22T23:08:36.229Z","0.0.0-20230823134503-134d8f1a-nightly":"2023-08-23T14:51:38.782Z","0.0.0-20230823174824-5ef71be9-nightly":"2023-08-24T00:21:50.772Z","0.0.0-20230824020044-afa5db2e-nightly":"2023-08-24T02:17:25.444Z","0.0.0-20230824081236-b25a3da9-nightly":"2023-08-24T08:15:27.148Z","0.0.0-20230824205952-3df3727b-nightly":"2023-08-25T00:22:20.122Z","0.0.0-20230825040110-4373a05b-nightly":"2023-08-25T04:04:47.207Z","0.0.0-20230825054009-a12544d6-nightly":"2023-08-25T05:49:01.683Z","0.0.0-20230825222505-f2870064-nightly":"2023-08-26T00:21:07.885Z","0.0.0-20230826154851-89531566-nightly":"2023-08-27T00:23:57.621Z","0.0.0-20230827224823-81f8728e-nightly":"2023-08-28T00:23:00.051Z","0.0.0-20230828163942-e5356e86-nightly":"2023-08-29T00:23:24.138Z","0.8.0":"2023-08-29T15:02:55.018Z","0.0.0-20230829150056-df43987c-nightly":"2023-08-30T00:22:36.669Z","0.0.0-20230830111255-92eab248-nightly":"2023-08-30T15:59:57.222Z","0.0.0-20230831171019-9141eea8-nightly":"2023-08-31T18:07:40.678Z","0.0.0-20230901043529-5c749cf6-nightly":"2023-09-01T04:39:12.638Z","0.0.0-20230901235404-5365e5eb-nightly":"2023-09-02T00:21:57.441Z","0.0.0-20230902132629-a4a41d59-nightly":"2023-09-03T00:23:54.121Z","0.0.0-20230903053104-ef722e5c-nightly":"2023-09-04T00:23:01.784Z","0.0.0-20230904210824-82bf80a4-nightly":"2023-09-05T00:22:07.720Z","0.0.0-20230905170607-94acf22c-nightly":"2023-09-06T00:22:30.379Z","0.0.0-20230906133203-d3774c2c-nightly":"2023-09-07T00:22:08.748Z","0.0.0-20230907104636-f5488de4-nightly":"2023-09-07T17:29:29.204Z","0.0.0-20230907185700-6c99dd4f-nightly":"2023-09-07T18:59:51.225Z","0.0.0-20230907210208-a9fef2d6-nightly":"2023-09-07T21:07:39.093Z","0.0.0-20230907214521-21fbaa38-nightly":"2023-09-07T22:04:47.120Z","0.0.0-20230907222710-102d1e99-nightly":"2023-09-07T22:34:37.447Z","0.0.0-20230908185655-61117b50-nightly":"2023-09-09T00:21:36.688Z","0.0.0-20230909130440-65b0f0da-nightly":"2023-09-10T00:23:52.317Z","0.0.0-20230910163106-33a276b2-nightly":"2023-09-11T00:23:12.923Z","0.0.0-20230911110410-f65fc3ab-nightly":"2023-09-12T00:21:24.237Z","0.0.0-20230912153951-446befe2-nightly":"2023-09-13T00:23:12.921Z","0.0.0-20230913110404-34f93652-nightly":"2023-09-14T00:22:22.128Z","0.0.0-20230914154016-d7677f0e-nightly":"2023-09-15T00:22:50.702Z","0.0.0-20230915024743-71a1d5d0-nightly":"2023-09-15T02:50:00.088Z","0.0.0-20230915090114-978cb706-nightly":"2023-09-15T19:47:30.236Z","0.0.0-20230916000655-4af2f43d-nightly":"2023-09-16T00:21:48.120Z","0.0.0-20230916185147-0c6fecc0-nightly":"2023-09-17T00:24:13.055Z","0.0.0-20230917124854-21f7463c-nightly":"2023-09-18T00:23:00.392Z","0.0.0-20230919000022-43249faf-nightly":"2023-09-19T00:23:14.203Z","0.0.0-20230919035452-9b4f2218-nightly":"2023-09-19T04:11:25.339Z","0.0.0-20230919170443-ed5c7fa3-nightly":"2023-09-20T00:22:54.524Z","0.0.0-20230920185507-1ac1fefc-nightly":"2023-09-20T18:58:27.752Z","0.0.0-20230920200947-68bd641c-nightly":"2023-09-21T00:22:17.265Z","0.0.0-20230920225615-7a430559-nightly":"2023-09-21T03:08:42.296Z","0.0.0-20230921050035-7e4bb7d9-nightly":"2023-09-21T05:03:28.828Z","0.0.0-20230921052800-cdd48566-nightly":"2023-09-21T05:31:25.939Z","0.0.0-20230921053452-d014310e-nightly":"2023-09-21T05:38:18.961Z","0.0.0-20230921103931-38d8f07a-nightly":"2023-09-21T19:35:26.052Z","0.0.0-20230921131319-c9560872-nightly":"2023-09-22T00:22:43.870Z","0.0.0-20230922124454-d10c8fac-nightly":"2023-09-23T00:21:40.788Z","0.0.0-20230923161429-c57d2113-nightly":"2023-09-24T00:24:03.692Z","0.0.0-20230924223737-8993bc0f-nightly":"2023-09-25T00:23:50.496Z","0.0.0-20230925163612-6d2dbfcc-nightly":"2023-09-26T00:23:36.826Z","0.0.0-20230926212737-6d4b1569-nightly":"2023-09-27T00:22:42.578Z","0.0.0-20230927141016-cdc360d8-nightly":"2023-09-28T00:22:47.897Z","0.0.0-20230928220834-dd640ee7-nightly":"2023-09-29T00:23:10.733Z","0.0.0-20230929113624-bf8a1012-nightly":"2023-09-30T00:22:26.066Z","0.0.0-20231001000339-3a03b2d4-nightly":"2023-10-01T00:26:29.207Z","0.0.0-20231001105326-1ce1cfd2-nightly":"2023-10-02T00:23:52.727Z","0.0.0-20231002183259-cf2c7ed1-nightly":"2023-10-03T00:23:34.851Z","0.0.0-20231003121106-9641d418-nightly":"2023-10-04T00:23:21.061Z","0.0.0-20231004042412-b8302951-nightly":"2023-10-05T00:22:57.179Z","0.0.0-20231008115225-c3aa109d-nightly":"2023-10-09T00:23:53.181Z","0.0.0-20231009110852-1342c43f-nightly":"2023-10-10T00:23:06.893Z","0.0.0-20231010093124-eb528310-nightly":"2023-10-11T00:23:06.617Z","0.0.0-20231011102951-763786d7-nightly":"2023-10-12T00:21:41.005Z","0.0.0-20231012110022-883c3ab3-nightly":"2023-10-13T00:23:30.054Z","0.0.0-20231013124600-0b50f15e-nightly":"2023-10-14T00:22:09.714Z","0.0.0-20231014135453-1634ecc4-nightly":"2023-10-15T00:25:08.091Z","0.0.0-20231015121126-6b9061b8-nightly":"2023-10-16T00:25:00.994Z","0.0.0-20231016141032-bd16edf2-nightly":"2023-10-17T00:23:24.581Z","0.0.0-20231018002009-e1515f86-nightly":"2023-10-18T00:24:26.565Z","0.0.0-20231018100009-361737d3-nightly":"2023-10-18T10:23:08.874Z","0.9.0":"2023-10-18T12:28:00.648Z","0.0.0-20231018165053-6a3da92f-nightly":"2023-10-19T00:23:40.824Z","0.0.0-20231019112329-dbf10b07-nightly":"2023-10-20T00:23:45.319Z","0.0.0-20231020080315-99dc51bc-nightly":"2023-10-21T00:22:18.306Z","0.0.0-20231022183532-20d6f0fd-nightly":"2023-10-23T00:23:42.966Z","0.0.0-20231023083139-15bc3fd0-nightly":"2023-10-24T00:23:56.871Z","0.0.0-20231024064721-2aee7119-nightly":"2023-10-24T07:12:52.162Z","0.0.0-20231024175824-6ba0419a-nightly":"2023-10-25T00:23:19.314Z","0.0.0-20231025234954-8769a7df-nightly":"2023-10-26T00:22:53.663Z","0.0.0-20231026145131-b75c6b54-nightly":"2023-10-27T00:23:05.719Z","0.0.0-20231027071653-5f50691f-nightly":"2023-10-28T00:22:37.239Z","0.0.0-20231028125236-5a17e2a0-nightly":"2023-10-29T00:24:53.614Z","0.0.0-20231029025237-f8b04fc9-nightly":"2023-10-30T00:24:08.996Z","0.0.0-20231030231216-032babdc-nightly":"2023-10-31T00:23:22.505Z","0.0.0-20231031082416-924fb688-nightly":"2023-11-01T00:25:49.526Z","0.0.0-20231101080734-aa27dc89-nightly":"2023-11-01T08:19:21.943Z","0.0.0-20231102101259-8b6138c0-nightly":"2023-11-03T00:23:05.460Z","0.0.0-20231103104910-0eeee58c-nightly":"2023-11-04T00:22:41.560Z","0.0.0-20231106121401-6279980b-nightly":"2023-11-07T00:23:09.626Z","0.0.0-20231107050554-2f248df8-nightly":"2023-11-07T07:07:40.919Z","0.0.0-20231107092420-e84d1d44-nightly":"2023-11-07T09:48:01.082Z","0.0.0-20231107102720-d68b393d-nightly":"2023-11-07T11:04:12.851Z","0.0.0-20231108022924-723cee6b-nightly":"2023-11-08T02:31:36.269Z","0.0.0-20231108035505-d0c8e35f-nightly":"2023-11-08T03:57:46.652Z","0.0.0-20231108041746-2e7e3467-nightly":"2023-11-08T04:20:53.810Z","0.0.0-20231108075905-8775a0ef-nightly":"2023-11-08T08:05:24.595Z","0.0.0-20231108134311-9db4ffd4-nightly":"2023-11-09T00:23:23.723Z","0.0.0-20231109020257-c0ea9c49-nightly":"2023-11-09T03:45:26.993Z","0.0.0-20231110021850-52cfc795-nightly":"2023-11-10T02:21:35.915Z","0.0.0-20231110042432-4fdac4dc-nightly":"2023-11-10T04:36:14.874Z","0.0.0-20231110114546-e826a529-nightly":"2023-11-11T00:22:42.678Z","0.0.0-20231111160253-ac6d1710-nightly":"2023-11-12T00:25:11.513Z","0.0.0-20231112150507-eef76a5b-nightly":"2023-11-13T00:24:37.455Z","0.0.0-20231113111359-0c7eb06d-nightly":"2023-11-14T00:23:35.884Z","0.0.0-20231114212812-9faee00d-nightly":"2023-11-15T00:23:52.199Z","0.0.0-20231116001525-613c4578-nightly":"2023-11-16T00:24:08.968Z","0.0.0-20231116023037-31273bb7-nightly":"2023-11-16T02:33:36.299Z","0.0.0-20231116182319-d78c07cd-nightly":"2023-11-17T00:23:57.849Z","0.0.0-20231117210747-f0fae3d3-nightly":"2023-11-18T00:23:31.920Z","0.0.0-20231118232251-b86518c0-nightly":"2023-11-19T00:26:15.781Z","0.0.0-20231120161302-31e19e84-nightly":"2023-11-21T00:24:38.218Z","0.0.0-20231121141506-b91e620e-nightly":"2023-11-22T00:25:30.980Z","0.0.0-20231122030911-ce7ac88f-nightly":"2023-11-22T03:12:35.587Z","0.0.0-20231122080937-d46dd0bc-nightly":"2023-11-22T08:16:56.562Z","0.0.0-20231122113751-6bf81eb3-nightly":"2023-11-22T12:25:39.609Z","0.0.0-20231122145541-bee38b14-nightly":"2023-11-23T00:24:12.648Z","0.0.0-20231123121754-5332da05-nightly":"2023-11-24T00:23:21.597Z","0.0.0-20231123092349-a42b9d29-nightly":"2023-11-24T09:09:43.673Z","0.0.0-20231124123613-7c06e95d-nightly":"2023-11-24T14:36:27.913Z","0.0.0-20231124234659-773f45dc-nightly":"2023-11-25T00:23:02.882Z","0.0.0-20231125093248-f69f4092-nightly":"2023-11-26T00:25:48.133Z","0.0.0-20231126143809-55f43c7d-nightly":"2023-11-27T00:24:40.143Z","0.10.0":"2023-11-27T10:31:22.335Z","0.0.0-20231127102934-4db7c04e-nightly":"2023-11-28T00:24:13.730Z","0.0.0-20231128125833-66182b18-nightly":"2023-11-29T00:24:30.014Z","0.0.0-20231129061623-2c7d451b-nightly":"2023-11-29T08:00:38.389Z","0.0.0-20231129200023-14f7d22b-nightly":"2023-11-30T00:24:32.214Z","0.0.0-20231130025440-fbb2c00f-nightly":"2023-11-30T03:16:24.723Z","0.0.0-20231130092516-0f858b95-nightly":"2023-11-30T09:29:09.963Z","0.0.0-20231130143113-735df194-nightly":"2023-12-01T00:26:50.047Z","0.0.0-20231201164740-f2324b82-nightly":"2023-12-02T00:23:07.243Z","0.0.0-20231202175457-d8257e52-nightly":"2023-12-03T00:26:02.082Z","0.0.0-20231204140005-aac86f1f-nightly":"2023-12-05T00:25:04.142Z","0.0.0-20231205014633-87633ea8-nightly":"2023-12-05T02:00:59.689Z","0.0.0-20231205045113-03964196-nightly":"2023-12-05T04:54:58.647Z","0.0.0-20231205070718-0f862ee5-nightly":"2023-12-05T07:09:59.069Z","0.0.0-20231205095753-129ec7e5-nightly":"2023-12-06T00:25:03.726Z","0.0.0-20231206051647-ab555738-nightly":"2023-12-06T08:16:30.763Z","0.0.0-202312061317-6117e6c-nightly":"2023-12-06T14:31:15.161Z","0.11.0-nightly-202312061456-a5bf73a":"2023-12-06T14:59:25.624Z","0.11.0-nightly-202312061510-1165d5e":"2023-12-07T00:24:30.691Z","0.11.0-nightly-202312070955-2b5bb47":"2023-12-07T10:30:55.489Z","0.11.0-nightly-202312071711-fde4ce0":"2023-12-08T00:24:52.949Z","0.11.0-nightly-202312080949-82627a4":"2023-12-09T00:24:22.907Z","0.11.0-nightly-202312091235-1f4dee4":"2023-12-10T00:26:57.760Z","0.11.0-nightly-202312112316-7eb9a0a":"2023-12-12T00:24:47.768Z","0.11.0-nightly-202312120309-2b3d2ba":"2023-12-12T03:14:48.898Z"},"bugs":{"url":"https://github.com/toeverything/blocksuite/issues"},"author":{"name":"toeverything"},"license":"MPL-2.0","homepage":"https://github.com/toeverything/blocksuite#readme","keywords":[],"repository":{"url":"git+https://github.com/toeverything/blocksuite.git","type":"git"},"description":"A micro editor.","maintainers":[{"email":"doodlewind@gmail.com","name":"doodlewind"},{"email":"zover.v@gmail.com","name":"l-sun"}],"readme":"","readmeFilename":""}