index.js 228 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312331333143315331633173318331933203321332233233324332533263327332833293330333133323333333433353336333733383339334033413342334333443345334633473348334933503351335233533354335533563357335833593360336133623363336433653366336733683369337033713372337333743375337633773378337933803381338233833384338533863387338833893390339133923393339433953396339733983399340034013402340334043405340634073408340934103411341234133414341534163417341834193420342134223423342434253426342734283429343034313432343334343435343634373438343934403441344234433444344534463447344834493450345134523453345434553456345734583459346034613462346334643465346634673468346934703471347234733474347534763477347834793480348134823483348434853486348734883489349034913492349334943495349634973498349935003501350235033504350535063507350835093510351135123513351435153516351735183519352035213522352335243525352635273528352935303531353235333534353535363537353835393540354135423543354435453546354735483549355035513552355335543555355635573558355935603561356235633564356535663567356835693570357135723573357435753576357735783579358035813582358335843585358635873588358935903591359235933594359535963597359835993600360136023603360436053606360736083609361036113612361336143615361636173618361936203621362236233624362536263627362836293630363136323633363436353636363736383639364036413642364336443645364636473648364936503651365236533654365536563657365836593660366136623663366436653666366736683669367036713672367336743675367636773678367936803681368236833684368536863687368836893690369136923693369436953696369736983699370037013702370337043705370637073708370937103711371237133714371537163717371837193720372137223723372437253726372737283729373037313732373337343735373637373738373937403741374237433744374537463747374837493750375137523753375437553756375737583759376037613762376337643765376637673768376937703771377237733774377537763777377837793780378137823783378437853786378737883789379037913792379337943795379637973798379938003801380238033804380538063807380838093810381138123813381438153816381738183819382038213822382338243825382638273828382938303831383238333834383538363837383838393840384138423843384438453846384738483849385038513852385338543855385638573858385938603861386238633864386538663867386838693870387138723873387438753876387738783879388038813882388338843885388638873888388938903891389238933894389538963897389838993900390139023903390439053906390739083909391039113912391339143915391639173918391939203921392239233924392539263927392839293930393139323933393439353936393739383939394039413942394339443945394639473948394939503951395239533954395539563957395839593960396139623963396439653966396739683969397039713972397339743975397639773978397939803981398239833984398539863987398839893990399139923993399439953996399739983999400040014002400340044005400640074008400940104011401240134014401540164017401840194020402140224023402440254026402740284029403040314032403340344035403640374038403940404041404240434044404540464047404840494050405140524053405440554056405740584059406040614062406340644065406640674068406940704071407240734074407540764077407840794080408140824083408440854086408740884089409040914092409340944095409640974098409941004101410241034104410541064107410841094110411141124113411441154116411741184119412041214122412341244125412641274128412941304131413241334134413541364137413841394140414141424143414441454146414741484149415041514152415341544155415641574158415941604161416241634164416541664167416841694170417141724173417441754176417741784179418041814182418341844185418641874188418941904191419241934194419541964197419841994200420142024203420442054206420742084209421042114212421342144215421642174218421942204221422242234224422542264227422842294230423142324233423442354236423742384239424042414242424342444245424642474248424942504251425242534254425542564257425842594260426142624263426442654266426742684269427042714272427342744275427642774278427942804281428242834284428542864287428842894290429142924293429442954296429742984299430043014302430343044305430643074308430943104311431243134314431543164317431843194320432143224323432443254326432743284329433043314332433343344335433643374338433943404341434243434344434543464347434843494350435143524353435443554356435743584359436043614362436343644365436643674368436943704371437243734374437543764377437843794380438143824383438443854386438743884389439043914392439343944395439643974398439944004401440244034404440544064407440844094410441144124413441444154416441744184419442044214422442344244425442644274428442944304431443244334434443544364437443844394440444144424443444444454446444744484449445044514452445344544455445644574458445944604461446244634464446544664467446844694470447144724473447444754476447744784479448044814482448344844485448644874488448944904491449244934494449544964497449844994500450145024503450445054506450745084509451045114512451345144515451645174518451945204521452245234524452545264527452845294530453145324533453445354536453745384539454045414542454345444545454645474548454945504551455245534554455545564557455845594560456145624563456445654566456745684569457045714572457345744575457645774578457945804581458245834584458545864587458845894590459145924593459445954596459745984599460046014602460346044605460646074608460946104611461246134614461546164617461846194620462146224623462446254626462746284629463046314632463346344635463646374638463946404641464246434644464546464647464846494650465146524653465446554656465746584659466046614662466346644665466646674668466946704671467246734674467546764677467846794680468146824683468446854686468746884689469046914692469346944695469646974698469947004701470247034704470547064707470847094710471147124713471447154716471747184719472047214722472347244725472647274728472947304731473247334734473547364737473847394740474147424743474447454746474747484749475047514752475347544755475647574758475947604761476247634764476547664767476847694770477147724773477447754776477747784779478047814782478347844785478647874788478947904791479247934794479547964797479847994800480148024803480448054806480748084809481048114812481348144815481648174818481948204821482248234824482548264827482848294830483148324833483448354836483748384839484048414842484348444845484648474848484948504851485248534854485548564857485848594860486148624863486448654866486748684869487048714872487348744875487648774878487948804881488248834884488548864887488848894890489148924893489448954896489748984899490049014902490349044905490649074908490949104911491249134914491549164917491849194920492149224923492449254926492749284929493049314932493349344935493649374938493949404941494249434944494549464947494849494950495149524953495449554956495749584959496049614962496349644965496649674968496949704971497249734974497549764977497849794980498149824983498449854986498749884989499049914992499349944995499649974998499950005001500250035004500550065007500850095010501150125013501450155016501750185019502050215022502350245025502650275028502950305031503250335034503550365037503850395040504150425043504450455046504750485049505050515052505350545055505650575058505950605061506250635064506550665067506850695070507150725073507450755076507750785079508050815082508350845085508650875088508950905091509250935094509550965097509850995100510151025103510451055106510751085109511051115112511351145115511651175118511951205121512251235124512551265127512851295130513151325133513451355136513751385139514051415142514351445145514651475148514951505151515251535154515551565157515851595160516151625163516451655166516751685169517051715172517351745175517651775178517951805181518251835184518551865187518851895190519151925193519451955196519751985199520052015202520352045205520652075208520952105211521252135214521552165217521852195220522152225223522452255226522752285229523052315232523352345235523652375238523952405241524252435244524552465247524852495250525152525253525452555256525752585259526052615262526352645265526652675268526952705271527252735274527552765277527852795280528152825283528452855286528752885289529052915292529352945295529652975298529953005301530253035304530553065307530853095310531153125313531453155316531753185319532053215322532353245325532653275328532953305331533253335334533553365337533853395340534153425343534453455346534753485349535053515352535353545355535653575358535953605361536253635364536553665367536853695370537153725373537453755376537753785379538053815382538353845385538653875388538953905391539253935394539553965397539853995400540154025403540454055406540754085409541054115412541354145415541654175418541954205421542254235424542554265427542854295430543154325433543454355436543754385439544054415442544354445445544654475448544954505451545254535454545554565457545854595460546154625463546454655466546754685469547054715472547354745475547654775478547954805481548254835484548554865487548854895490549154925493549454955496549754985499550055015502550355045505550655075508550955105511551255135514551555165517551855195520552155225523552455255526552755285529553055315532553355345535553655375538553955405541554255435544554555465547554855495550555155525553555455555556555755585559556055615562556355645565556655675568556955705571557255735574557555765577557855795580558155825583558455855586558755885589559055915592559355945595559655975598559956005601560256035604560556065607560856095610561156125613561456155616561756185619562056215622562356245625562656275628562956305631563256335634563556365637
  1. import { TextSelection, NodeSelection, AllSelection, Selection } from 'prosemirror-state';
  2. import { DOMSerializer, Fragment, Mark, Slice, DOMParser } from 'prosemirror-model';
  3. import { dropPoint } from 'prosemirror-transform';
  4. const domIndex = function (node) {
  5. for (var index = 0;; index++) {
  6. node = node.previousSibling;
  7. if (!node)
  8. return index;
  9. }
  10. };
  11. const parentNode = function (node) {
  12. let parent = node.assignedSlot || node.parentNode;
  13. return parent && parent.nodeType == 11 ? parent.host : parent;
  14. };
  15. let reusedRange = null;
  16. // Note that this will always return the same range, because DOM range
  17. // objects are every expensive, and keep slowing down subsequent DOM
  18. // updates, for some reason.
  19. const textRange = function (node, from, to) {
  20. let range = reusedRange || (reusedRange = document.createRange());
  21. range.setEnd(node, to == null ? node.nodeValue.length : to);
  22. range.setStart(node, from || 0);
  23. return range;
  24. };
  25. // Scans forward and backward through DOM positions equivalent to the
  26. // given one to see if the two are in the same place (i.e. after a
  27. // text node vs at the end of that text node)
  28. const isEquivalentPosition = function (node, off, targetNode, targetOff) {
  29. return targetNode && (scanFor(node, off, targetNode, targetOff, -1) ||
  30. scanFor(node, off, targetNode, targetOff, 1));
  31. };
  32. const atomElements = /^(img|br|input|textarea|hr)$/i;
  33. function scanFor(node, off, targetNode, targetOff, dir) {
  34. for (;;) {
  35. if (node == targetNode && off == targetOff)
  36. return true;
  37. if (off == (dir < 0 ? 0 : nodeSize(node))) {
  38. let parent = node.parentNode;
  39. if (!parent || parent.nodeType != 1 || hasBlockDesc(node) || atomElements.test(node.nodeName) ||
  40. node.contentEditable == "false")
  41. return false;
  42. off = domIndex(node) + (dir < 0 ? 0 : 1);
  43. node = parent;
  44. }
  45. else if (node.nodeType == 1) {
  46. node = node.childNodes[off + (dir < 0 ? -1 : 0)];
  47. if (node.contentEditable == "false")
  48. return false;
  49. off = dir < 0 ? nodeSize(node) : 0;
  50. }
  51. else {
  52. return false;
  53. }
  54. }
  55. }
  56. function nodeSize(node) {
  57. return node.nodeType == 3 ? node.nodeValue.length : node.childNodes.length;
  58. }
  59. function isOnEdge(node, offset, parent) {
  60. for (let atStart = offset == 0, atEnd = offset == nodeSize(node); atStart || atEnd;) {
  61. if (node == parent)
  62. return true;
  63. let index = domIndex(node);
  64. node = node.parentNode;
  65. if (!node)
  66. return false;
  67. atStart = atStart && index == 0;
  68. atEnd = atEnd && index == nodeSize(node);
  69. }
  70. }
  71. function hasBlockDesc(dom) {
  72. let desc;
  73. for (let cur = dom; cur; cur = cur.parentNode)
  74. if (desc = cur.pmViewDesc)
  75. break;
  76. return desc && desc.node && desc.node.isBlock && (desc.dom == dom || desc.contentDOM == dom);
  77. }
  78. // Work around Chrome issue https://bugs.chromium.org/p/chromium/issues/detail?id=447523
  79. // (isCollapsed inappropriately returns true in shadow dom)
  80. const selectionCollapsed = function (domSel) {
  81. return domSel.focusNode && isEquivalentPosition(domSel.focusNode, domSel.focusOffset, domSel.anchorNode, domSel.anchorOffset);
  82. };
  83. function keyEvent(keyCode, key) {
  84. let event = document.createEvent("Event");
  85. event.initEvent("keydown", true, true);
  86. event.keyCode = keyCode;
  87. event.key = event.code = key;
  88. return event;
  89. }
  90. function deepActiveElement(doc) {
  91. let elt = doc.activeElement;
  92. while (elt && elt.shadowRoot)
  93. elt = elt.shadowRoot.activeElement;
  94. return elt;
  95. }
  96. function caretFromPoint(doc, x, y) {
  97. if (doc.caretPositionFromPoint) {
  98. try { // Firefox throws for this call in hard-to-predict circumstances (#994)
  99. let pos = doc.caretPositionFromPoint(x, y);
  100. if (pos)
  101. return { node: pos.offsetNode, offset: pos.offset };
  102. }
  103. catch (_) { }
  104. }
  105. if (doc.caretRangeFromPoint) {
  106. let range = doc.caretRangeFromPoint(x, y);
  107. if (range)
  108. return { node: range.startContainer, offset: range.startOffset };
  109. }
  110. }
  111. const nav = typeof navigator != "undefined" ? navigator : null;
  112. const doc = typeof document != "undefined" ? document : null;
  113. const agent = (nav && nav.userAgent) || "";
  114. const ie_edge = /Edge\/(\d+)/.exec(agent);
  115. const ie_upto10 = /MSIE \d/.exec(agent);
  116. const ie_11up = /Trident\/(?:[7-9]|\d{2,})\..*rv:(\d+)/.exec(agent);
  117. const ie = !!(ie_upto10 || ie_11up || ie_edge);
  118. const ie_version = ie_upto10 ? document.documentMode : ie_11up ? +ie_11up[1] : ie_edge ? +ie_edge[1] : 0;
  119. const gecko = !ie && /gecko\/(\d+)/i.test(agent);
  120. gecko && +(/Firefox\/(\d+)/.exec(agent) || [0, 0])[1];
  121. const _chrome = !ie && /Chrome\/(\d+)/.exec(agent);
  122. const chrome = !!_chrome;
  123. const chrome_version = _chrome ? +_chrome[1] : 0;
  124. const safari = !ie && !!nav && /Apple Computer/.test(nav.vendor);
  125. // Is true for both iOS and iPadOS for convenience
  126. const ios = safari && (/Mobile\/\w+/.test(agent) || !!nav && nav.maxTouchPoints > 2);
  127. const mac = ios || (nav ? /Mac/.test(nav.platform) : false);
  128. const windows = nav ? /Win/.test(nav.platform) : false;
  129. const android = /Android \d/.test(agent);
  130. const webkit = !!doc && "webkitFontSmoothing" in doc.documentElement.style;
  131. const webkit_version = webkit ? +(/\bAppleWebKit\/(\d+)/.exec(navigator.userAgent) || [0, 0])[1] : 0;
  132. function windowRect(doc) {
  133. return { left: 0, right: doc.documentElement.clientWidth,
  134. top: 0, bottom: doc.documentElement.clientHeight };
  135. }
  136. function getSide(value, side) {
  137. return typeof value == "number" ? value : value[side];
  138. }
  139. function clientRect(node) {
  140. let rect = node.getBoundingClientRect();
  141. // Adjust for elements with style "transform: scale()"
  142. let scaleX = (rect.width / node.offsetWidth) || 1;
  143. let scaleY = (rect.height / node.offsetHeight) || 1;
  144. // Make sure scrollbar width isn't included in the rectangle
  145. return { left: rect.left, right: rect.left + node.clientWidth * scaleX,
  146. top: rect.top, bottom: rect.top + node.clientHeight * scaleY };
  147. }
  148. function scrollRectIntoView(view, rect, startDOM) {
  149. let scrollThreshold = view.someProp("scrollThreshold") || 0, scrollMargin = view.someProp("scrollMargin") || 5;
  150. let doc = view.dom.ownerDocument;
  151. for (let parent = startDOM || view.dom;; parent = parentNode(parent)) {
  152. if (!parent)
  153. break;
  154. if (parent.nodeType != 1)
  155. continue;
  156. let elt = parent;
  157. let atTop = elt == doc.body;
  158. let bounding = atTop ? windowRect(doc) : clientRect(elt);
  159. let moveX = 0, moveY = 0;
  160. if (rect.top < bounding.top + getSide(scrollThreshold, "top"))
  161. moveY = -(bounding.top - rect.top + getSide(scrollMargin, "top"));
  162. else if (rect.bottom > bounding.bottom - getSide(scrollThreshold, "bottom"))
  163. moveY = rect.bottom - rect.top > bounding.bottom - bounding.top
  164. ? rect.top + getSide(scrollMargin, "top") - bounding.top
  165. : rect.bottom - bounding.bottom + getSide(scrollMargin, "bottom");
  166. if (rect.left < bounding.left + getSide(scrollThreshold, "left"))
  167. moveX = -(bounding.left - rect.left + getSide(scrollMargin, "left"));
  168. else if (rect.right > bounding.right - getSide(scrollThreshold, "right"))
  169. moveX = rect.right - bounding.right + getSide(scrollMargin, "right");
  170. if (moveX || moveY) {
  171. if (atTop) {
  172. doc.defaultView.scrollBy(moveX, moveY);
  173. }
  174. else {
  175. let startX = elt.scrollLeft, startY = elt.scrollTop;
  176. if (moveY)
  177. elt.scrollTop += moveY;
  178. if (moveX)
  179. elt.scrollLeft += moveX;
  180. let dX = elt.scrollLeft - startX, dY = elt.scrollTop - startY;
  181. rect = { left: rect.left - dX, top: rect.top - dY, right: rect.right - dX, bottom: rect.bottom - dY };
  182. }
  183. }
  184. if (atTop || /^(fixed|sticky)$/.test(getComputedStyle(parent).position))
  185. break;
  186. }
  187. }
  188. // Store the scroll position of the editor's parent nodes, along with
  189. // the top position of an element near the top of the editor, which
  190. // will be used to make sure the visible viewport remains stable even
  191. // when the size of the content above changes.
  192. function storeScrollPos(view) {
  193. let rect = view.dom.getBoundingClientRect(), startY = Math.max(0, rect.top);
  194. let refDOM, refTop;
  195. for (let x = (rect.left + rect.right) / 2, y = startY + 1; y < Math.min(innerHeight, rect.bottom); y += 5) {
  196. let dom = view.root.elementFromPoint(x, y);
  197. if (!dom || dom == view.dom || !view.dom.contains(dom))
  198. continue;
  199. let localRect = dom.getBoundingClientRect();
  200. if (localRect.top >= startY - 20) {
  201. refDOM = dom;
  202. refTop = localRect.top;
  203. break;
  204. }
  205. }
  206. return { refDOM: refDOM, refTop: refTop, stack: scrollStack(view.dom) };
  207. }
  208. function scrollStack(dom) {
  209. let stack = [], doc = dom.ownerDocument;
  210. for (let cur = dom; cur; cur = parentNode(cur)) {
  211. stack.push({ dom: cur, top: cur.scrollTop, left: cur.scrollLeft });
  212. if (dom == doc)
  213. break;
  214. }
  215. return stack;
  216. }
  217. // Reset the scroll position of the editor's parent nodes to that what
  218. // it was before, when storeScrollPos was called.
  219. function resetScrollPos({ refDOM, refTop, stack }) {
  220. let newRefTop = refDOM ? refDOM.getBoundingClientRect().top : 0;
  221. restoreScrollStack(stack, newRefTop == 0 ? 0 : newRefTop - refTop);
  222. }
  223. function restoreScrollStack(stack, dTop) {
  224. for (let i = 0; i < stack.length; i++) {
  225. let { dom, top, left } = stack[i];
  226. if (dom.scrollTop != top + dTop)
  227. dom.scrollTop = top + dTop;
  228. if (dom.scrollLeft != left)
  229. dom.scrollLeft = left;
  230. }
  231. }
  232. let preventScrollSupported = null;
  233. // Feature-detects support for .focus({preventScroll: true}), and uses
  234. // a fallback kludge when not supported.
  235. function focusPreventScroll(dom) {
  236. if (dom.setActive)
  237. return dom.setActive(); // in IE
  238. if (preventScrollSupported)
  239. return dom.focus(preventScrollSupported);
  240. let stored = scrollStack(dom);
  241. dom.focus(preventScrollSupported == null ? {
  242. get preventScroll() {
  243. preventScrollSupported = { preventScroll: true };
  244. return true;
  245. }
  246. } : undefined);
  247. if (!preventScrollSupported) {
  248. preventScrollSupported = false;
  249. restoreScrollStack(stored, 0);
  250. }
  251. }
  252. function findOffsetInNode(node, coords) {
  253. let closest, dxClosest = 2e8, coordsClosest, offset = 0;
  254. let rowBot = coords.top, rowTop = coords.top;
  255. let firstBelow, coordsBelow;
  256. for (let child = node.firstChild, childIndex = 0; child; child = child.nextSibling, childIndex++) {
  257. let rects;
  258. if (child.nodeType == 1)
  259. rects = child.getClientRects();
  260. else if (child.nodeType == 3)
  261. rects = textRange(child).getClientRects();
  262. else
  263. continue;
  264. for (let i = 0; i < rects.length; i++) {
  265. let rect = rects[i];
  266. if (rect.top <= rowBot && rect.bottom >= rowTop) {
  267. rowBot = Math.max(rect.bottom, rowBot);
  268. rowTop = Math.min(rect.top, rowTop);
  269. let dx = rect.left > coords.left ? rect.left - coords.left
  270. : rect.right < coords.left ? coords.left - rect.right : 0;
  271. if (dx < dxClosest) {
  272. closest = child;
  273. dxClosest = dx;
  274. coordsClosest = dx && closest.nodeType == 3 ? {
  275. left: rect.right < coords.left ? rect.right : rect.left,
  276. top: coords.top
  277. } : coords;
  278. if (child.nodeType == 1 && dx)
  279. offset = childIndex + (coords.left >= (rect.left + rect.right) / 2 ? 1 : 0);
  280. continue;
  281. }
  282. }
  283. else if (rect.top > coords.top && !firstBelow && rect.left <= coords.left && rect.right >= coords.left) {
  284. firstBelow = child;
  285. coordsBelow = { left: Math.max(rect.left, Math.min(rect.right, coords.left)), top: rect.top };
  286. }
  287. if (!closest && (coords.left >= rect.right && coords.top >= rect.top ||
  288. coords.left >= rect.left && coords.top >= rect.bottom))
  289. offset = childIndex + 1;
  290. }
  291. }
  292. if (!closest && firstBelow) {
  293. closest = firstBelow;
  294. coordsClosest = coordsBelow;
  295. dxClosest = 0;
  296. }
  297. if (closest && closest.nodeType == 3)
  298. return findOffsetInText(closest, coordsClosest);
  299. if (!closest || (dxClosest && closest.nodeType == 1))
  300. return { node, offset };
  301. return findOffsetInNode(closest, coordsClosest);
  302. }
  303. function findOffsetInText(node, coords) {
  304. let len = node.nodeValue.length;
  305. let range = document.createRange();
  306. for (let i = 0; i < len; i++) {
  307. range.setEnd(node, i + 1);
  308. range.setStart(node, i);
  309. let rect = singleRect(range, 1);
  310. if (rect.top == rect.bottom)
  311. continue;
  312. if (inRect(coords, rect))
  313. return { node, offset: i + (coords.left >= (rect.left + rect.right) / 2 ? 1 : 0) };
  314. }
  315. return { node, offset: 0 };
  316. }
  317. function inRect(coords, rect) {
  318. return coords.left >= rect.left - 1 && coords.left <= rect.right + 1 &&
  319. coords.top >= rect.top - 1 && coords.top <= rect.bottom + 1;
  320. }
  321. function targetKludge(dom, coords) {
  322. let parent = dom.parentNode;
  323. if (parent && /^li$/i.test(parent.nodeName) && coords.left < dom.getBoundingClientRect().left)
  324. return parent;
  325. return dom;
  326. }
  327. function posFromElement(view, elt, coords) {
  328. let { node, offset } = findOffsetInNode(elt, coords), bias = -1;
  329. if (node.nodeType == 1 && !node.firstChild) {
  330. let rect = node.getBoundingClientRect();
  331. bias = rect.left != rect.right && coords.left > (rect.left + rect.right) / 2 ? 1 : -1;
  332. }
  333. return view.docView.posFromDOM(node, offset, bias);
  334. }
  335. function posFromCaret(view, node, offset, coords) {
  336. // Browser (in caretPosition/RangeFromPoint) will agressively
  337. // normalize towards nearby inline nodes. Since we are interested in
  338. // positions between block nodes too, we first walk up the hierarchy
  339. // of nodes to see if there are block nodes that the coordinates
  340. // fall outside of. If so, we take the position before/after that
  341. // block. If not, we call `posFromDOM` on the raw node/offset.
  342. let outsideBlock = -1;
  343. for (let cur = node, sawBlock = false;;) {
  344. if (cur == view.dom)
  345. break;
  346. let desc = view.docView.nearestDesc(cur, true);
  347. if (!desc)
  348. return null;
  349. if (desc.dom.nodeType == 1 && (desc.node.isBlock && desc.parent && !sawBlock || !desc.contentDOM)) {
  350. let rect = desc.dom.getBoundingClientRect();
  351. if (desc.node.isBlock && desc.parent && !sawBlock) {
  352. sawBlock = true;
  353. if (rect.left > coords.left || rect.top > coords.top)
  354. outsideBlock = desc.posBefore;
  355. else if (rect.right < coords.left || rect.bottom < coords.top)
  356. outsideBlock = desc.posAfter;
  357. }
  358. if (!desc.contentDOM && outsideBlock < 0 && !desc.node.isText) {
  359. // If we are inside a leaf, return the side of the leaf closer to the coords
  360. let before = desc.node.isBlock ? coords.top < (rect.top + rect.bottom) / 2
  361. : coords.left < (rect.left + rect.right) / 2;
  362. return before ? desc.posBefore : desc.posAfter;
  363. }
  364. }
  365. cur = desc.dom.parentNode;
  366. }
  367. return outsideBlock > -1 ? outsideBlock : view.docView.posFromDOM(node, offset, -1);
  368. }
  369. function elementFromPoint(element, coords, box) {
  370. let len = element.childNodes.length;
  371. if (len && box.top < box.bottom) {
  372. for (let startI = Math.max(0, Math.min(len - 1, Math.floor(len * (coords.top - box.top) / (box.bottom - box.top)) - 2)), i = startI;;) {
  373. let child = element.childNodes[i];
  374. if (child.nodeType == 1) {
  375. let rects = child.getClientRects();
  376. for (let j = 0; j < rects.length; j++) {
  377. let rect = rects[j];
  378. if (inRect(coords, rect))
  379. return elementFromPoint(child, coords, rect);
  380. }
  381. }
  382. if ((i = (i + 1) % len) == startI)
  383. break;
  384. }
  385. }
  386. return element;
  387. }
  388. // Given an x,y position on the editor, get the position in the document.
  389. function posAtCoords(view, coords) {
  390. let doc = view.dom.ownerDocument, node, offset = 0;
  391. let caret = caretFromPoint(doc, coords.left, coords.top);
  392. if (caret)
  393. ({ node, offset } = caret);
  394. let elt = (view.root.elementFromPoint ? view.root : doc)
  395. .elementFromPoint(coords.left, coords.top);
  396. let pos;
  397. if (!elt || !view.dom.contains(elt.nodeType != 1 ? elt.parentNode : elt)) {
  398. let box = view.dom.getBoundingClientRect();
  399. if (!inRect(coords, box))
  400. return null;
  401. elt = elementFromPoint(view.dom, coords, box);
  402. if (!elt)
  403. return null;
  404. }
  405. // Safari's caretRangeFromPoint returns nonsense when on a draggable element
  406. if (safari) {
  407. for (let p = elt; node && p; p = parentNode(p))
  408. if (p.draggable)
  409. node = undefined;
  410. }
  411. elt = targetKludge(elt, coords);
  412. if (node) {
  413. if (gecko && node.nodeType == 1) {
  414. // Firefox will sometimes return offsets into <input> nodes, which
  415. // have no actual children, from caretPositionFromPoint (#953)
  416. offset = Math.min(offset, node.childNodes.length);
  417. // It'll also move the returned position before image nodes,
  418. // even if those are behind it.
  419. if (offset < node.childNodes.length) {
  420. let next = node.childNodes[offset], box;
  421. if (next.nodeName == "IMG" && (box = next.getBoundingClientRect()).right <= coords.left &&
  422. box.bottom > coords.top)
  423. offset++;
  424. }
  425. }
  426. let prev;
  427. // When clicking above the right side of an uneditable node, Chrome will report a cursor position after that node.
  428. if (webkit && offset && node.nodeType == 1 && (prev = node.childNodes[offset - 1]).nodeType == 1 &&
  429. prev.contentEditable == "false" && prev.getBoundingClientRect().top >= coords.top)
  430. offset--;
  431. // Suspiciously specific kludge to work around caret*FromPoint
  432. // never returning a position at the end of the document
  433. if (node == view.dom && offset == node.childNodes.length - 1 && node.lastChild.nodeType == 1 &&
  434. coords.top > node.lastChild.getBoundingClientRect().bottom)
  435. pos = view.state.doc.content.size;
  436. // Ignore positions directly after a BR, since caret*FromPoint
  437. // 'round up' positions that would be more accurately placed
  438. // before the BR node.
  439. else if (offset == 0 || node.nodeType != 1 || node.childNodes[offset - 1].nodeName != "BR")
  440. pos = posFromCaret(view, node, offset, coords);
  441. }
  442. if (pos == null)
  443. pos = posFromElement(view, elt, coords);
  444. let desc = view.docView.nearestDesc(elt, true);
  445. return { pos, inside: desc ? desc.posAtStart - desc.border : -1 };
  446. }
  447. function nonZero(rect) {
  448. return rect.top < rect.bottom || rect.left < rect.right;
  449. }
  450. function singleRect(target, bias) {
  451. let rects = target.getClientRects();
  452. if (rects.length) {
  453. let first = rects[bias < 0 ? 0 : rects.length - 1];
  454. if (nonZero(first))
  455. return first;
  456. }
  457. return Array.prototype.find.call(rects, nonZero) || target.getBoundingClientRect();
  458. }
  459. const BIDI = /[\u0590-\u05f4\u0600-\u06ff\u0700-\u08ac]/;
  460. // Given a position in the document model, get a bounding box of the
  461. // character at that position, relative to the window.
  462. function coordsAtPos(view, pos, side) {
  463. let { node, offset, atom } = view.docView.domFromPos(pos, side < 0 ? -1 : 1);
  464. let supportEmptyRange = webkit || gecko;
  465. if (node.nodeType == 3) {
  466. // These browsers support querying empty text ranges. Prefer that in
  467. // bidi context or when at the end of a node.
  468. if (supportEmptyRange && (BIDI.test(node.nodeValue) || (side < 0 ? !offset : offset == node.nodeValue.length))) {
  469. let rect = singleRect(textRange(node, offset, offset), side);
  470. // Firefox returns bad results (the position before the space)
  471. // when querying a position directly after line-broken
  472. // whitespace. Detect this situation and and kludge around it
  473. if (gecko && offset && /\s/.test(node.nodeValue[offset - 1]) && offset < node.nodeValue.length) {
  474. let rectBefore = singleRect(textRange(node, offset - 1, offset - 1), -1);
  475. if (rectBefore.top == rect.top) {
  476. let rectAfter = singleRect(textRange(node, offset, offset + 1), -1);
  477. if (rectAfter.top != rect.top)
  478. return flattenV(rectAfter, rectAfter.left < rectBefore.left);
  479. }
  480. }
  481. return rect;
  482. }
  483. else {
  484. let from = offset, to = offset, takeSide = side < 0 ? 1 : -1;
  485. if (side < 0 && !offset) {
  486. to++;
  487. takeSide = -1;
  488. }
  489. else if (side >= 0 && offset == node.nodeValue.length) {
  490. from--;
  491. takeSide = 1;
  492. }
  493. else if (side < 0) {
  494. from--;
  495. }
  496. else {
  497. to++;
  498. }
  499. return flattenV(singleRect(textRange(node, from, to), takeSide), takeSide < 0);
  500. }
  501. }
  502. let $dom = view.state.doc.resolve(pos - (atom || 0));
  503. // Return a horizontal line in block context
  504. if (!$dom.parent.inlineContent) {
  505. if (atom == null && offset && (side < 0 || offset == nodeSize(node))) {
  506. let before = node.childNodes[offset - 1];
  507. if (before.nodeType == 1)
  508. return flattenH(before.getBoundingClientRect(), false);
  509. }
  510. if (atom == null && offset < nodeSize(node)) {
  511. let after = node.childNodes[offset];
  512. if (after.nodeType == 1)
  513. return flattenH(after.getBoundingClientRect(), true);
  514. }
  515. return flattenH(node.getBoundingClientRect(), side >= 0);
  516. }
  517. // Inline, not in text node (this is not Bidi-safe)
  518. if (atom == null && offset && (side < 0 || offset == nodeSize(node))) {
  519. let before = node.childNodes[offset - 1];
  520. let target = before.nodeType == 3 ? textRange(before, nodeSize(before) - (supportEmptyRange ? 0 : 1))
  521. // BR nodes tend to only return the rectangle before them.
  522. // Only use them if they are the last element in their parent
  523. : before.nodeType == 1 && (before.nodeName != "BR" || !before.nextSibling) ? before : null;
  524. if (target)
  525. return flattenV(singleRect(target, 1), false);
  526. }
  527. if (atom == null && offset < nodeSize(node)) {
  528. let after = node.childNodes[offset];
  529. while (after.pmViewDesc && after.pmViewDesc.ignoreForCoords)
  530. after = after.nextSibling;
  531. let target = !after ? null : after.nodeType == 3 ? textRange(after, 0, (supportEmptyRange ? 0 : 1))
  532. : after.nodeType == 1 ? after : null;
  533. if (target)
  534. return flattenV(singleRect(target, -1), true);
  535. }
  536. // All else failed, just try to get a rectangle for the target node
  537. return flattenV(singleRect(node.nodeType == 3 ? textRange(node) : node, -side), side >= 0);
  538. }
  539. function flattenV(rect, left) {
  540. if (rect.width == 0)
  541. return rect;
  542. let x = left ? rect.left : rect.right;
  543. return { top: rect.top, bottom: rect.bottom, left: x, right: x };
  544. }
  545. function flattenH(rect, top) {
  546. if (rect.height == 0)
  547. return rect;
  548. let y = top ? rect.top : rect.bottom;
  549. return { top: y, bottom: y, left: rect.left, right: rect.right };
  550. }
  551. function withFlushedState(view, state, f) {
  552. let viewState = view.state, active = view.root.activeElement;
  553. if (viewState != state)
  554. view.updateState(state);
  555. if (active != view.dom)
  556. view.focus();
  557. try {
  558. return f();
  559. }
  560. finally {
  561. if (viewState != state)
  562. view.updateState(viewState);
  563. if (active != view.dom && active)
  564. active.focus();
  565. }
  566. }
  567. // Whether vertical position motion in a given direction
  568. // from a position would leave a text block.
  569. function endOfTextblockVertical(view, state, dir) {
  570. let sel = state.selection;
  571. let $pos = dir == "up" ? sel.$from : sel.$to;
  572. return withFlushedState(view, state, () => {
  573. let { node: dom } = view.docView.domFromPos($pos.pos, dir == "up" ? -1 : 1);
  574. for (;;) {
  575. let nearest = view.docView.nearestDesc(dom, true);
  576. if (!nearest)
  577. break;
  578. if (nearest.node.isBlock) {
  579. dom = nearest.contentDOM || nearest.dom;
  580. break;
  581. }
  582. dom = nearest.dom.parentNode;
  583. }
  584. let coords = coordsAtPos(view, $pos.pos, 1);
  585. for (let child = dom.firstChild; child; child = child.nextSibling) {
  586. let boxes;
  587. if (child.nodeType == 1)
  588. boxes = child.getClientRects();
  589. else if (child.nodeType == 3)
  590. boxes = textRange(child, 0, child.nodeValue.length).getClientRects();
  591. else
  592. continue;
  593. for (let i = 0; i < boxes.length; i++) {
  594. let box = boxes[i];
  595. if (box.bottom > box.top + 1 &&
  596. (dir == "up" ? coords.top - box.top > (box.bottom - coords.top) * 2
  597. : box.bottom - coords.bottom > (coords.bottom - box.top) * 2))
  598. return false;
  599. }
  600. }
  601. return true;
  602. });
  603. }
  604. const maybeRTL = /[\u0590-\u08ac]/;
  605. function endOfTextblockHorizontal(view, state, dir) {
  606. let { $head } = state.selection;
  607. if (!$head.parent.isTextblock)
  608. return false;
  609. let offset = $head.parentOffset, atStart = !offset, atEnd = offset == $head.parent.content.size;
  610. let sel = view.domSelection();
  611. // If the textblock is all LTR, or the browser doesn't support
  612. // Selection.modify (Edge), fall back to a primitive approach
  613. if (!maybeRTL.test($head.parent.textContent) || !sel.modify)
  614. return dir == "left" || dir == "backward" ? atStart : atEnd;
  615. return withFlushedState(view, state, () => {
  616. // This is a huge hack, but appears to be the best we can
  617. // currently do: use `Selection.modify` to move the selection by
  618. // one character, and see if that moves the cursor out of the
  619. // textblock (or doesn't move it at all, when at the start/end of
  620. // the document).
  621. let { focusNode: oldNode, focusOffset: oldOff, anchorNode, anchorOffset } = view.domSelectionRange();
  622. let oldBidiLevel = sel.caretBidiLevel // Only for Firefox
  623. ;
  624. sel.modify("move", dir, "character");
  625. let parentDOM = $head.depth ? view.docView.domAfterPos($head.before()) : view.dom;
  626. let { focusNode: newNode, focusOffset: newOff } = view.domSelectionRange();
  627. let result = newNode && !parentDOM.contains(newNode.nodeType == 1 ? newNode : newNode.parentNode) ||
  628. (oldNode == newNode && oldOff == newOff);
  629. // Restore the previous selection
  630. try {
  631. sel.collapse(anchorNode, anchorOffset);
  632. if (oldNode && (oldNode != anchorNode || oldOff != anchorOffset) && sel.extend)
  633. sel.extend(oldNode, oldOff);
  634. }
  635. catch (_) { }
  636. if (oldBidiLevel != null)
  637. sel.caretBidiLevel = oldBidiLevel;
  638. return result;
  639. });
  640. }
  641. let cachedState = null;
  642. let cachedDir = null;
  643. let cachedResult = false;
  644. function endOfTextblock(view, state, dir) {
  645. if (cachedState == state && cachedDir == dir)
  646. return cachedResult;
  647. cachedState = state;
  648. cachedDir = dir;
  649. return cachedResult = dir == "up" || dir == "down"
  650. ? endOfTextblockVertical(view, state, dir)
  651. : endOfTextblockHorizontal(view, state, dir);
  652. }
  653. // View descriptions are data structures that describe the DOM that is
  654. // used to represent the editor's content. They are used for:
  655. //
  656. // - Incremental redrawing when the document changes
  657. //
  658. // - Figuring out what part of the document a given DOM position
  659. // corresponds to
  660. //
  661. // - Wiring in custom implementations of the editing interface for a
  662. // given node
  663. //
  664. // They form a doubly-linked mutable tree, starting at `view.docView`.
  665. const NOT_DIRTY = 0, CHILD_DIRTY = 1, CONTENT_DIRTY = 2, NODE_DIRTY = 3;
  666. // Superclass for the various kinds of descriptions. Defines their
  667. // basic structure and shared methods.
  668. class ViewDesc {
  669. constructor(parent, children, dom,
  670. // This is the node that holds the child views. It may be null for
  671. // descs that don't have children.
  672. contentDOM) {
  673. this.parent = parent;
  674. this.children = children;
  675. this.dom = dom;
  676. this.contentDOM = contentDOM;
  677. this.dirty = NOT_DIRTY;
  678. // An expando property on the DOM node provides a link back to its
  679. // description.
  680. dom.pmViewDesc = this;
  681. }
  682. // Used to check whether a given description corresponds to a
  683. // widget/mark/node.
  684. matchesWidget(widget) { return false; }
  685. matchesMark(mark) { return false; }
  686. matchesNode(node, outerDeco, innerDeco) { return false; }
  687. matchesHack(nodeName) { return false; }
  688. // When parsing in-editor content (in domchange.js), we allow
  689. // descriptions to determine the parse rules that should be used to
  690. // parse them.
  691. parseRule() { return null; }
  692. // Used by the editor's event handler to ignore events that come
  693. // from certain descs.
  694. stopEvent(event) { return false; }
  695. // The size of the content represented by this desc.
  696. get size() {
  697. let size = 0;
  698. for (let i = 0; i < this.children.length; i++)
  699. size += this.children[i].size;
  700. return size;
  701. }
  702. // For block nodes, this represents the space taken up by their
  703. // start/end tokens.
  704. get border() { return 0; }
  705. destroy() {
  706. this.parent = undefined;
  707. if (this.dom.pmViewDesc == this)
  708. this.dom.pmViewDesc = undefined;
  709. for (let i = 0; i < this.children.length; i++)
  710. this.children[i].destroy();
  711. }
  712. posBeforeChild(child) {
  713. for (let i = 0, pos = this.posAtStart;; i++) {
  714. let cur = this.children[i];
  715. if (cur == child)
  716. return pos;
  717. pos += cur.size;
  718. }
  719. }
  720. get posBefore() {
  721. return this.parent.posBeforeChild(this);
  722. }
  723. get posAtStart() {
  724. return this.parent ? this.parent.posBeforeChild(this) + this.border : 0;
  725. }
  726. get posAfter() {
  727. return this.posBefore + this.size;
  728. }
  729. get posAtEnd() {
  730. return this.posAtStart + this.size - 2 * this.border;
  731. }
  732. localPosFromDOM(dom, offset, bias) {
  733. // If the DOM position is in the content, use the child desc after
  734. // it to figure out a position.
  735. if (this.contentDOM && this.contentDOM.contains(dom.nodeType == 1 ? dom : dom.parentNode)) {
  736. if (bias < 0) {
  737. let domBefore, desc;
  738. if (dom == this.contentDOM) {
  739. domBefore = dom.childNodes[offset - 1];
  740. }
  741. else {
  742. while (dom.parentNode != this.contentDOM)
  743. dom = dom.parentNode;
  744. domBefore = dom.previousSibling;
  745. }
  746. while (domBefore && !((desc = domBefore.pmViewDesc) && desc.parent == this))
  747. domBefore = domBefore.previousSibling;
  748. return domBefore ? this.posBeforeChild(desc) + desc.size : this.posAtStart;
  749. }
  750. else {
  751. let domAfter, desc;
  752. if (dom == this.contentDOM) {
  753. domAfter = dom.childNodes[offset];
  754. }
  755. else {
  756. while (dom.parentNode != this.contentDOM)
  757. dom = dom.parentNode;
  758. domAfter = dom.nextSibling;
  759. }
  760. while (domAfter && !((desc = domAfter.pmViewDesc) && desc.parent == this))
  761. domAfter = domAfter.nextSibling;
  762. return domAfter ? this.posBeforeChild(desc) : this.posAtEnd;
  763. }
  764. }
  765. // Otherwise, use various heuristics, falling back on the bias
  766. // parameter, to determine whether to return the position at the
  767. // start or at the end of this view desc.
  768. let atEnd;
  769. if (dom == this.dom && this.contentDOM) {
  770. atEnd = offset > domIndex(this.contentDOM);
  771. }
  772. else if (this.contentDOM && this.contentDOM != this.dom && this.dom.contains(this.contentDOM)) {
  773. atEnd = dom.compareDocumentPosition(this.contentDOM) & 2;
  774. }
  775. else if (this.dom.firstChild) {
  776. if (offset == 0)
  777. for (let search = dom;; search = search.parentNode) {
  778. if (search == this.dom) {
  779. atEnd = false;
  780. break;
  781. }
  782. if (search.previousSibling)
  783. break;
  784. }
  785. if (atEnd == null && offset == dom.childNodes.length)
  786. for (let search = dom;; search = search.parentNode) {
  787. if (search == this.dom) {
  788. atEnd = true;
  789. break;
  790. }
  791. if (search.nextSibling)
  792. break;
  793. }
  794. }
  795. return (atEnd == null ? bias > 0 : atEnd) ? this.posAtEnd : this.posAtStart;
  796. }
  797. nearestDesc(dom, onlyNodes = false) {
  798. for (let first = true, cur = dom; cur; cur = cur.parentNode) {
  799. let desc = this.getDesc(cur), nodeDOM;
  800. if (desc && (!onlyNodes || desc.node)) {
  801. // If dom is outside of this desc's nodeDOM, don't count it.
  802. if (first && (nodeDOM = desc.nodeDOM) &&
  803. !(nodeDOM.nodeType == 1 ? nodeDOM.contains(dom.nodeType == 1 ? dom : dom.parentNode) : nodeDOM == dom))
  804. first = false;
  805. else
  806. return desc;
  807. }
  808. }
  809. }
  810. getDesc(dom) {
  811. let desc = dom.pmViewDesc;
  812. for (let cur = desc; cur; cur = cur.parent)
  813. if (cur == this)
  814. return desc;
  815. }
  816. posFromDOM(dom, offset, bias) {
  817. for (let scan = dom; scan; scan = scan.parentNode) {
  818. let desc = this.getDesc(scan);
  819. if (desc)
  820. return desc.localPosFromDOM(dom, offset, bias);
  821. }
  822. return -1;
  823. }
  824. // Find the desc for the node after the given pos, if any. (When a
  825. // parent node overrode rendering, there might not be one.)
  826. descAt(pos) {
  827. for (let i = 0, offset = 0; i < this.children.length; i++) {
  828. let child = this.children[i], end = offset + child.size;
  829. if (offset == pos && end != offset) {
  830. while (!child.border && child.children.length)
  831. child = child.children[0];
  832. return child;
  833. }
  834. if (pos < end)
  835. return child.descAt(pos - offset - child.border);
  836. offset = end;
  837. }
  838. }
  839. domFromPos(pos, side) {
  840. if (!this.contentDOM)
  841. return { node: this.dom, offset: 0, atom: pos + 1 };
  842. // First find the position in the child array
  843. let i = 0, offset = 0;
  844. for (let curPos = 0; i < this.children.length; i++) {
  845. let child = this.children[i], end = curPos + child.size;
  846. if (end > pos || child instanceof TrailingHackViewDesc) {
  847. offset = pos - curPos;
  848. break;
  849. }
  850. curPos = end;
  851. }
  852. // If this points into the middle of a child, call through
  853. if (offset)
  854. return this.children[i].domFromPos(offset - this.children[i].border, side);
  855. // Go back if there were any zero-length widgets with side >= 0 before this point
  856. for (let prev; i && !(prev = this.children[i - 1]).size && prev instanceof WidgetViewDesc && prev.side >= 0; i--) { }
  857. // Scan towards the first useable node
  858. if (side <= 0) {
  859. let prev, enter = true;
  860. for (;; i--, enter = false) {
  861. prev = i ? this.children[i - 1] : null;
  862. if (!prev || prev.dom.parentNode == this.contentDOM)
  863. break;
  864. }
  865. if (prev && side && enter && !prev.border && !prev.domAtom)
  866. return prev.domFromPos(prev.size, side);
  867. return { node: this.contentDOM, offset: prev ? domIndex(prev.dom) + 1 : 0 };
  868. }
  869. else {
  870. let next, enter = true;
  871. for (;; i++, enter = false) {
  872. next = i < this.children.length ? this.children[i] : null;
  873. if (!next || next.dom.parentNode == this.contentDOM)
  874. break;
  875. }
  876. if (next && enter && !next.border && !next.domAtom)
  877. return next.domFromPos(0, side);
  878. return { node: this.contentDOM, offset: next ? domIndex(next.dom) : this.contentDOM.childNodes.length };
  879. }
  880. }
  881. // Used to find a DOM range in a single parent for a given changed
  882. // range.
  883. parseRange(from, to, base = 0) {
  884. if (this.children.length == 0)
  885. return { node: this.contentDOM, from, to, fromOffset: 0, toOffset: this.contentDOM.childNodes.length };
  886. let fromOffset = -1, toOffset = -1;
  887. for (let offset = base, i = 0;; i++) {
  888. let child = this.children[i], end = offset + child.size;
  889. if (fromOffset == -1 && from <= end) {
  890. let childBase = offset + child.border;
  891. // FIXME maybe descend mark views to parse a narrower range?
  892. if (from >= childBase && to <= end - child.border && child.node &&
  893. child.contentDOM && this.contentDOM.contains(child.contentDOM))
  894. return child.parseRange(from, to, childBase);
  895. from = offset;
  896. for (let j = i; j > 0; j--) {
  897. let prev = this.children[j - 1];
  898. if (prev.size && prev.dom.parentNode == this.contentDOM && !prev.emptyChildAt(1)) {
  899. fromOffset = domIndex(prev.dom) + 1;
  900. break;
  901. }
  902. from -= prev.size;
  903. }
  904. if (fromOffset == -1)
  905. fromOffset = 0;
  906. }
  907. if (fromOffset > -1 && (end > to || i == this.children.length - 1)) {
  908. to = end;
  909. for (let j = i + 1; j < this.children.length; j++) {
  910. let next = this.children[j];
  911. if (next.size && next.dom.parentNode == this.contentDOM && !next.emptyChildAt(-1)) {
  912. toOffset = domIndex(next.dom);
  913. break;
  914. }
  915. to += next.size;
  916. }
  917. if (toOffset == -1)
  918. toOffset = this.contentDOM.childNodes.length;
  919. break;
  920. }
  921. offset = end;
  922. }
  923. return { node: this.contentDOM, from, to, fromOffset, toOffset };
  924. }
  925. emptyChildAt(side) {
  926. if (this.border || !this.contentDOM || !this.children.length)
  927. return false;
  928. let child = this.children[side < 0 ? 0 : this.children.length - 1];
  929. return child.size == 0 || child.emptyChildAt(side);
  930. }
  931. domAfterPos(pos) {
  932. let { node, offset } = this.domFromPos(pos, 0);
  933. if (node.nodeType != 1 || offset == node.childNodes.length)
  934. throw new RangeError("No node after pos " + pos);
  935. return node.childNodes[offset];
  936. }
  937. // View descs are responsible for setting any selection that falls
  938. // entirely inside of them, so that custom implementations can do
  939. // custom things with the selection. Note that this falls apart when
  940. // a selection starts in such a node and ends in another, in which
  941. // case we just use whatever domFromPos produces as a best effort.
  942. setSelection(anchor, head, root, force = false) {
  943. // If the selection falls entirely in a child, give it to that child
  944. let from = Math.min(anchor, head), to = Math.max(anchor, head);
  945. for (let i = 0, offset = 0; i < this.children.length; i++) {
  946. let child = this.children[i], end = offset + child.size;
  947. if (from > offset && to < end)
  948. return child.setSelection(anchor - offset - child.border, head - offset - child.border, root, force);
  949. offset = end;
  950. }
  951. let anchorDOM = this.domFromPos(anchor, anchor ? -1 : 1);
  952. let headDOM = head == anchor ? anchorDOM : this.domFromPos(head, head ? -1 : 1);
  953. let domSel = root.getSelection();
  954. let brKludge = false;
  955. // On Firefox, using Selection.collapse to put the cursor after a
  956. // BR node for some reason doesn't always work (#1073). On Safari,
  957. // the cursor sometimes inexplicable visually lags behind its
  958. // reported position in such situations (#1092).
  959. if ((gecko || safari) && anchor == head) {
  960. let { node, offset } = anchorDOM;
  961. if (node.nodeType == 3) {
  962. brKludge = !!(offset && node.nodeValue[offset - 1] == "\n");
  963. // Issue #1128
  964. if (brKludge && offset == node.nodeValue.length) {
  965. for (let scan = node, after; scan; scan = scan.parentNode) {
  966. if (after = scan.nextSibling) {
  967. if (after.nodeName == "BR")
  968. anchorDOM = headDOM = { node: after.parentNode, offset: domIndex(after) + 1 };
  969. break;
  970. }
  971. let desc = scan.pmViewDesc;
  972. if (desc && desc.node && desc.node.isBlock)
  973. break;
  974. }
  975. }
  976. }
  977. else {
  978. let prev = node.childNodes[offset - 1];
  979. brKludge = prev && (prev.nodeName == "BR" || prev.contentEditable == "false");
  980. }
  981. }
  982. // Firefox can act strangely when the selection is in front of an
  983. // uneditable node. See #1163 and https://bugzilla.mozilla.org/show_bug.cgi?id=1709536
  984. if (gecko && domSel.focusNode && domSel.focusNode != headDOM.node && domSel.focusNode.nodeType == 1) {
  985. let after = domSel.focusNode.childNodes[domSel.focusOffset];
  986. if (after && after.contentEditable == "false")
  987. force = true;
  988. }
  989. if (!(force || brKludge && safari) &&
  990. isEquivalentPosition(anchorDOM.node, anchorDOM.offset, domSel.anchorNode, domSel.anchorOffset) &&
  991. isEquivalentPosition(headDOM.node, headDOM.offset, domSel.focusNode, domSel.focusOffset))
  992. return;
  993. // Selection.extend can be used to create an 'inverted' selection
  994. // (one where the focus is before the anchor), but not all
  995. // browsers support it yet.
  996. let domSelExtended = false;
  997. if ((domSel.extend || anchor == head) && !brKludge) {
  998. domSel.collapse(anchorDOM.node, anchorDOM.offset);
  999. try {
  1000. if (anchor != head)
  1001. domSel.extend(headDOM.node, headDOM.offset);
  1002. domSelExtended = true;
  1003. }
  1004. catch (_) {
  1005. // In some cases with Chrome the selection is empty after calling
  1006. // collapse, even when it should be valid. This appears to be a bug, but
  1007. // it is difficult to isolate. If this happens fallback to the old path
  1008. // without using extend.
  1009. // Similarly, this could crash on Safari if the editor is hidden, and
  1010. // there was no selection.
  1011. }
  1012. }
  1013. if (!domSelExtended) {
  1014. if (anchor > head) {
  1015. let tmp = anchorDOM;
  1016. anchorDOM = headDOM;
  1017. headDOM = tmp;
  1018. }
  1019. let range = document.createRange();
  1020. range.setEnd(headDOM.node, headDOM.offset);
  1021. range.setStart(anchorDOM.node, anchorDOM.offset);
  1022. domSel.removeAllRanges();
  1023. domSel.addRange(range);
  1024. }
  1025. }
  1026. ignoreMutation(mutation) {
  1027. return !this.contentDOM && mutation.type != "selection";
  1028. }
  1029. get contentLost() {
  1030. return this.contentDOM && this.contentDOM != this.dom && !this.dom.contains(this.contentDOM);
  1031. }
  1032. // Remove a subtree of the element tree that has been touched
  1033. // by a DOM change, so that the next update will redraw it.
  1034. markDirty(from, to) {
  1035. for (let offset = 0, i = 0; i < this.children.length; i++) {
  1036. let child = this.children[i], end = offset + child.size;
  1037. if (offset == end ? from <= end && to >= offset : from < end && to > offset) {
  1038. let startInside = offset + child.border, endInside = end - child.border;
  1039. if (from >= startInside && to <= endInside) {
  1040. this.dirty = from == offset || to == end ? CONTENT_DIRTY : CHILD_DIRTY;
  1041. if (from == startInside && to == endInside &&
  1042. (child.contentLost || child.dom.parentNode != this.contentDOM))
  1043. child.dirty = NODE_DIRTY;
  1044. else
  1045. child.markDirty(from - startInside, to - startInside);
  1046. return;
  1047. }
  1048. else {
  1049. child.dirty = child.dom == child.contentDOM && child.dom.parentNode == this.contentDOM && !child.children.length
  1050. ? CONTENT_DIRTY : NODE_DIRTY;
  1051. }
  1052. }
  1053. offset = end;
  1054. }
  1055. this.dirty = CONTENT_DIRTY;
  1056. }
  1057. markParentsDirty() {
  1058. let level = 1;
  1059. for (let node = this.parent; node; node = node.parent, level++) {
  1060. let dirty = level == 1 ? CONTENT_DIRTY : CHILD_DIRTY;
  1061. if (node.dirty < dirty)
  1062. node.dirty = dirty;
  1063. }
  1064. }
  1065. get domAtom() { return false; }
  1066. get ignoreForCoords() { return false; }
  1067. }
  1068. // A widget desc represents a widget decoration, which is a DOM node
  1069. // drawn between the document nodes.
  1070. class WidgetViewDesc extends ViewDesc {
  1071. constructor(parent, widget, view, pos) {
  1072. let self, dom = widget.type.toDOM;
  1073. if (typeof dom == "function")
  1074. dom = dom(view, () => {
  1075. if (!self)
  1076. return pos;
  1077. if (self.parent)
  1078. return self.parent.posBeforeChild(self);
  1079. });
  1080. if (!widget.type.spec.raw) {
  1081. if (dom.nodeType != 1) {
  1082. let wrap = document.createElement("span");
  1083. wrap.appendChild(dom);
  1084. dom = wrap;
  1085. }
  1086. dom.contentEditable = "false";
  1087. dom.classList.add("ProseMirror-widget");
  1088. }
  1089. super(parent, [], dom, null);
  1090. this.widget = widget;
  1091. this.widget = widget;
  1092. self = this;
  1093. }
  1094. matchesWidget(widget) {
  1095. return this.dirty == NOT_DIRTY && widget.type.eq(this.widget.type);
  1096. }
  1097. parseRule() { return { ignore: true }; }
  1098. stopEvent(event) {
  1099. let stop = this.widget.spec.stopEvent;
  1100. return stop ? stop(event) : false;
  1101. }
  1102. ignoreMutation(mutation) {
  1103. return mutation.type != "selection" || this.widget.spec.ignoreSelection;
  1104. }
  1105. destroy() {
  1106. this.widget.type.destroy(this.dom);
  1107. super.destroy();
  1108. }
  1109. get domAtom() { return true; }
  1110. get side() { return this.widget.type.side; }
  1111. }
  1112. class CompositionViewDesc extends ViewDesc {
  1113. constructor(parent, dom, textDOM, text) {
  1114. super(parent, [], dom, null);
  1115. this.textDOM = textDOM;
  1116. this.text = text;
  1117. }
  1118. get size() { return this.text.length; }
  1119. localPosFromDOM(dom, offset) {
  1120. if (dom != this.textDOM)
  1121. return this.posAtStart + (offset ? this.size : 0);
  1122. return this.posAtStart + offset;
  1123. }
  1124. domFromPos(pos) {
  1125. return { node: this.textDOM, offset: pos };
  1126. }
  1127. ignoreMutation(mut) {
  1128. return mut.type === 'characterData' && mut.target.nodeValue == mut.oldValue;
  1129. }
  1130. }
  1131. // A mark desc represents a mark. May have multiple children,
  1132. // depending on how the mark is split. Note that marks are drawn using
  1133. // a fixed nesting order, for simplicity and predictability, so in
  1134. // some cases they will be split more often than would appear
  1135. // necessary.
  1136. class MarkViewDesc extends ViewDesc {
  1137. constructor(parent, mark, dom, contentDOM) {
  1138. super(parent, [], dom, contentDOM);
  1139. this.mark = mark;
  1140. }
  1141. static create(parent, mark, inline, view) {
  1142. let custom = view.nodeViews[mark.type.name];
  1143. let spec = custom && custom(mark, view, inline);
  1144. if (!spec || !spec.dom)
  1145. spec = DOMSerializer.renderSpec(document, mark.type.spec.toDOM(mark, inline));
  1146. return new MarkViewDesc(parent, mark, spec.dom, spec.contentDOM || spec.dom);
  1147. }
  1148. parseRule() {
  1149. if ((this.dirty & NODE_DIRTY) || this.mark.type.spec.reparseInView)
  1150. return null;
  1151. return { mark: this.mark.type.name, attrs: this.mark.attrs, contentElement: this.contentDOM };
  1152. }
  1153. matchesMark(mark) { return this.dirty != NODE_DIRTY && this.mark.eq(mark); }
  1154. markDirty(from, to) {
  1155. super.markDirty(from, to);
  1156. // Move dirty info to nearest node view
  1157. if (this.dirty != NOT_DIRTY) {
  1158. let parent = this.parent;
  1159. while (!parent.node)
  1160. parent = parent.parent;
  1161. if (parent.dirty < this.dirty)
  1162. parent.dirty = this.dirty;
  1163. this.dirty = NOT_DIRTY;
  1164. }
  1165. }
  1166. slice(from, to, view) {
  1167. let copy = MarkViewDesc.create(this.parent, this.mark, true, view);
  1168. let nodes = this.children, size = this.size;
  1169. if (to < size)
  1170. nodes = replaceNodes(nodes, to, size, view);
  1171. if (from > 0)
  1172. nodes = replaceNodes(nodes, 0, from, view);
  1173. for (let i = 0; i < nodes.length; i++)
  1174. nodes[i].parent = copy;
  1175. copy.children = nodes;
  1176. return copy;
  1177. }
  1178. }
  1179. // Node view descs are the main, most common type of view desc, and
  1180. // correspond to an actual node in the document. Unlike mark descs,
  1181. // they populate their child array themselves.
  1182. class NodeViewDesc extends ViewDesc {
  1183. constructor(parent, node, outerDeco, innerDeco, dom, contentDOM, nodeDOM, view, pos) {
  1184. super(parent, [], dom, contentDOM);
  1185. this.node = node;
  1186. this.outerDeco = outerDeco;
  1187. this.innerDeco = innerDeco;
  1188. this.nodeDOM = nodeDOM;
  1189. }
  1190. // By default, a node is rendered using the `toDOM` method from the
  1191. // node type spec. But client code can use the `nodeViews` spec to
  1192. // supply a custom node view, which can influence various aspects of
  1193. // the way the node works.
  1194. //
  1195. // (Using subclassing for this was intentionally decided against,
  1196. // since it'd require exposing a whole slew of finicky
  1197. // implementation details to the user code that they probably will
  1198. // never need.)
  1199. static create(parent, node, outerDeco, innerDeco, view, pos) {
  1200. let custom = view.nodeViews[node.type.name], descObj;
  1201. let spec = custom && custom(node, view, () => {
  1202. // (This is a function that allows the custom view to find its
  1203. // own position)
  1204. if (!descObj)
  1205. return pos;
  1206. if (descObj.parent)
  1207. return descObj.parent.posBeforeChild(descObj);
  1208. }, outerDeco, innerDeco);
  1209. let dom = spec && spec.dom, contentDOM = spec && spec.contentDOM;
  1210. if (node.isText) {
  1211. if (!dom)
  1212. dom = document.createTextNode(node.text);
  1213. else if (dom.nodeType != 3)
  1214. throw new RangeError("Text must be rendered as a DOM text node");
  1215. }
  1216. else if (!dom) {
  1217. ({ dom, contentDOM } = DOMSerializer.renderSpec(document, node.type.spec.toDOM(node)));
  1218. }
  1219. if (!contentDOM && !node.isText && dom.nodeName != "BR") { // Chrome gets confused by <br contenteditable=false>
  1220. if (!dom.hasAttribute("contenteditable"))
  1221. dom.contentEditable = "false";
  1222. if (node.type.spec.draggable)
  1223. dom.draggable = true;
  1224. }
  1225. let nodeDOM = dom;
  1226. dom = applyOuterDeco(dom, outerDeco, node);
  1227. if (spec)
  1228. return descObj = new CustomNodeViewDesc(parent, node, outerDeco, innerDeco, dom, contentDOM || null, nodeDOM, spec, view, pos + 1);
  1229. else if (node.isText)
  1230. return new TextViewDesc(parent, node, outerDeco, innerDeco, dom, nodeDOM, view);
  1231. else
  1232. return new NodeViewDesc(parent, node, outerDeco, innerDeco, dom, contentDOM || null, nodeDOM, view, pos + 1);
  1233. }
  1234. parseRule() {
  1235. // Experimental kludge to allow opt-in re-parsing of nodes
  1236. if (this.node.type.spec.reparseInView)
  1237. return null;
  1238. // FIXME the assumption that this can always return the current
  1239. // attrs means that if the user somehow manages to change the
  1240. // attrs in the dom, that won't be picked up. Not entirely sure
  1241. // whether this is a problem
  1242. let rule = { node: this.node.type.name, attrs: this.node.attrs };
  1243. if (this.node.type.whitespace == "pre")
  1244. rule.preserveWhitespace = "full";
  1245. if (!this.contentDOM) {
  1246. rule.getContent = () => this.node.content;
  1247. }
  1248. else if (!this.contentLost) {
  1249. rule.contentElement = this.contentDOM;
  1250. }
  1251. else {
  1252. // Chrome likes to randomly recreate parent nodes when
  1253. // backspacing things. When that happens, this tries to find the
  1254. // new parent.
  1255. for (let i = this.children.length - 1; i >= 0; i--) {
  1256. let child = this.children[i];
  1257. if (this.dom.contains(child.dom.parentNode)) {
  1258. rule.contentElement = child.dom.parentNode;
  1259. break;
  1260. }
  1261. }
  1262. if (!rule.contentElement)
  1263. rule.getContent = () => Fragment.empty;
  1264. }
  1265. return rule;
  1266. }
  1267. matchesNode(node, outerDeco, innerDeco) {
  1268. return this.dirty == NOT_DIRTY && node.eq(this.node) &&
  1269. sameOuterDeco(outerDeco, this.outerDeco) && innerDeco.eq(this.innerDeco);
  1270. }
  1271. get size() { return this.node.nodeSize; }
  1272. get border() { return this.node.isLeaf ? 0 : 1; }
  1273. // Syncs `this.children` to match `this.node.content` and the local
  1274. // decorations, possibly introducing nesting for marks. Then, in a
  1275. // separate step, syncs the DOM inside `this.contentDOM` to
  1276. // `this.children`.
  1277. updateChildren(view, pos) {
  1278. let inline = this.node.inlineContent, off = pos;
  1279. let composition = view.composing ? this.localCompositionInfo(view, pos) : null;
  1280. let localComposition = composition && composition.pos > -1 ? composition : null;
  1281. let compositionInChild = composition && composition.pos < 0;
  1282. let updater = new ViewTreeUpdater(this, localComposition && localComposition.node, view);
  1283. iterDeco(this.node, this.innerDeco, (widget, i, insideNode) => {
  1284. if (widget.spec.marks)
  1285. updater.syncToMarks(widget.spec.marks, inline, view);
  1286. else if (widget.type.side >= 0 && !insideNode)
  1287. updater.syncToMarks(i == this.node.childCount ? Mark.none : this.node.child(i).marks, inline, view);
  1288. // If the next node is a desc matching this widget, reuse it,
  1289. // otherwise insert the widget as a new view desc.
  1290. updater.placeWidget(widget, view, off);
  1291. }, (child, outerDeco, innerDeco, i) => {
  1292. // Make sure the wrapping mark descs match the node's marks.
  1293. updater.syncToMarks(child.marks, inline, view);
  1294. // Try several strategies for drawing this node
  1295. let compIndex;
  1296. if (updater.findNodeMatch(child, outerDeco, innerDeco, i)) ;
  1297. else if (compositionInChild && view.state.selection.from > off &&
  1298. view.state.selection.to < off + child.nodeSize &&
  1299. (compIndex = updater.findIndexWithChild(composition.node)) > -1 &&
  1300. updater.updateNodeAt(child, outerDeco, innerDeco, compIndex, view)) ;
  1301. else if (updater.updateNextNode(child, outerDeco, innerDeco, view, i, off)) ;
  1302. else {
  1303. // Add it as a new view
  1304. updater.addNode(child, outerDeco, innerDeco, view, off);
  1305. }
  1306. off += child.nodeSize;
  1307. });
  1308. // Drop all remaining descs after the current position.
  1309. updater.syncToMarks([], inline, view);
  1310. if (this.node.isTextblock)
  1311. updater.addTextblockHacks();
  1312. updater.destroyRest();
  1313. // Sync the DOM if anything changed
  1314. if (updater.changed || this.dirty == CONTENT_DIRTY) {
  1315. // May have to protect focused DOM from being changed if a composition is active
  1316. if (localComposition)
  1317. this.protectLocalComposition(view, localComposition);
  1318. renderDescs(this.contentDOM, this.children, view);
  1319. if (ios)
  1320. iosHacks(this.dom);
  1321. }
  1322. }
  1323. localCompositionInfo(view, pos) {
  1324. // Only do something if both the selection and a focused text node
  1325. // are inside of this node
  1326. let { from, to } = view.state.selection;
  1327. if (!(view.state.selection instanceof TextSelection) || from < pos || to > pos + this.node.content.size)
  1328. return null;
  1329. let sel = view.domSelectionRange();
  1330. let textNode = nearbyTextNode(sel.focusNode, sel.focusOffset);
  1331. if (!textNode || !this.dom.contains(textNode.parentNode))
  1332. return null;
  1333. if (this.node.inlineContent) {
  1334. // Find the text in the focused node in the node, stop if it's not
  1335. // there (may have been modified through other means, in which
  1336. // case it should overwritten)
  1337. let text = textNode.nodeValue;
  1338. let textPos = findTextInFragment(this.node.content, text, from - pos, to - pos);
  1339. return textPos < 0 ? null : { node: textNode, pos: textPos, text };
  1340. }
  1341. else {
  1342. return { node: textNode, pos: -1, text: "" };
  1343. }
  1344. }
  1345. protectLocalComposition(view, { node, pos, text }) {
  1346. // The node is already part of a local view desc, leave it there
  1347. if (this.getDesc(node))
  1348. return;
  1349. // Create a composition view for the orphaned nodes
  1350. let topNode = node;
  1351. for (;; topNode = topNode.parentNode) {
  1352. if (topNode.parentNode == this.contentDOM)
  1353. break;
  1354. while (topNode.previousSibling)
  1355. topNode.parentNode.removeChild(topNode.previousSibling);
  1356. while (topNode.nextSibling)
  1357. topNode.parentNode.removeChild(topNode.nextSibling);
  1358. if (topNode.pmViewDesc)
  1359. topNode.pmViewDesc = undefined;
  1360. }
  1361. let desc = new CompositionViewDesc(this, topNode, node, text);
  1362. view.input.compositionNodes.push(desc);
  1363. // Patch up this.children to contain the composition view
  1364. this.children = replaceNodes(this.children, pos, pos + text.length, view, desc);
  1365. }
  1366. // If this desc must be updated to match the given node decoration,
  1367. // do so and return true.
  1368. update(node, outerDeco, innerDeco, view) {
  1369. if (this.dirty == NODE_DIRTY ||
  1370. !node.sameMarkup(this.node))
  1371. return false;
  1372. this.updateInner(node, outerDeco, innerDeco, view);
  1373. return true;
  1374. }
  1375. updateInner(node, outerDeco, innerDeco, view) {
  1376. this.updateOuterDeco(outerDeco);
  1377. this.node = node;
  1378. this.innerDeco = innerDeco;
  1379. if (this.contentDOM)
  1380. this.updateChildren(view, this.posAtStart);
  1381. this.dirty = NOT_DIRTY;
  1382. }
  1383. updateOuterDeco(outerDeco) {
  1384. if (sameOuterDeco(outerDeco, this.outerDeco))
  1385. return;
  1386. let needsWrap = this.nodeDOM.nodeType != 1;
  1387. let oldDOM = this.dom;
  1388. this.dom = patchOuterDeco(this.dom, this.nodeDOM, computeOuterDeco(this.outerDeco, this.node, needsWrap), computeOuterDeco(outerDeco, this.node, needsWrap));
  1389. if (this.dom != oldDOM) {
  1390. oldDOM.pmViewDesc = undefined;
  1391. this.dom.pmViewDesc = this;
  1392. }
  1393. this.outerDeco = outerDeco;
  1394. }
  1395. // Mark this node as being the selected node.
  1396. selectNode() {
  1397. if (this.nodeDOM.nodeType == 1)
  1398. this.nodeDOM.classList.add("ProseMirror-selectednode");
  1399. if (this.contentDOM || !this.node.type.spec.draggable)
  1400. this.dom.draggable = true;
  1401. }
  1402. // Remove selected node marking from this node.
  1403. deselectNode() {
  1404. if (this.nodeDOM.nodeType == 1)
  1405. this.nodeDOM.classList.remove("ProseMirror-selectednode");
  1406. if (this.contentDOM || !this.node.type.spec.draggable)
  1407. this.dom.removeAttribute("draggable");
  1408. }
  1409. get domAtom() { return this.node.isAtom; }
  1410. }
  1411. // Create a view desc for the top-level document node, to be exported
  1412. // and used by the view class.
  1413. function docViewDesc(doc, outerDeco, innerDeco, dom, view) {
  1414. applyOuterDeco(dom, outerDeco, doc);
  1415. let docView = new NodeViewDesc(undefined, doc, outerDeco, innerDeco, dom, dom, dom, view, 0);
  1416. if (docView.contentDOM)
  1417. docView.updateChildren(view, 0);
  1418. return docView;
  1419. }
  1420. class TextViewDesc extends NodeViewDesc {
  1421. constructor(parent, node, outerDeco, innerDeco, dom, nodeDOM, view) {
  1422. super(parent, node, outerDeco, innerDeco, dom, null, nodeDOM, view, 0);
  1423. }
  1424. parseRule() {
  1425. let skip = this.nodeDOM.parentNode;
  1426. while (skip && skip != this.dom && !skip.pmIsDeco)
  1427. skip = skip.parentNode;
  1428. return { skip: (skip || true) };
  1429. }
  1430. update(node, outerDeco, innerDeco, view) {
  1431. if (this.dirty == NODE_DIRTY || (this.dirty != NOT_DIRTY && !this.inParent()) ||
  1432. !node.sameMarkup(this.node))
  1433. return false;
  1434. this.updateOuterDeco(outerDeco);
  1435. if ((this.dirty != NOT_DIRTY || node.text != this.node.text) && node.text != this.nodeDOM.nodeValue) {
  1436. this.nodeDOM.nodeValue = node.text;
  1437. if (view.trackWrites == this.nodeDOM)
  1438. view.trackWrites = null;
  1439. }
  1440. this.node = node;
  1441. this.dirty = NOT_DIRTY;
  1442. return true;
  1443. }
  1444. inParent() {
  1445. let parentDOM = this.parent.contentDOM;
  1446. for (let n = this.nodeDOM; n; n = n.parentNode)
  1447. if (n == parentDOM)
  1448. return true;
  1449. return false;
  1450. }
  1451. domFromPos(pos) {
  1452. return { node: this.nodeDOM, offset: pos };
  1453. }
  1454. localPosFromDOM(dom, offset, bias) {
  1455. if (dom == this.nodeDOM)
  1456. return this.posAtStart + Math.min(offset, this.node.text.length);
  1457. return super.localPosFromDOM(dom, offset, bias);
  1458. }
  1459. ignoreMutation(mutation) {
  1460. return mutation.type != "characterData" && mutation.type != "selection";
  1461. }
  1462. slice(from, to, view) {
  1463. let node = this.node.cut(from, to), dom = document.createTextNode(node.text);
  1464. return new TextViewDesc(this.parent, node, this.outerDeco, this.innerDeco, dom, dom, view);
  1465. }
  1466. markDirty(from, to) {
  1467. super.markDirty(from, to);
  1468. if (this.dom != this.nodeDOM && (from == 0 || to == this.nodeDOM.nodeValue.length))
  1469. this.dirty = NODE_DIRTY;
  1470. }
  1471. get domAtom() { return false; }
  1472. }
  1473. // A dummy desc used to tag trailing BR or IMG nodes created to work
  1474. // around contentEditable terribleness.
  1475. class TrailingHackViewDesc extends ViewDesc {
  1476. parseRule() { return { ignore: true }; }
  1477. matchesHack(nodeName) { return this.dirty == NOT_DIRTY && this.dom.nodeName == nodeName; }
  1478. get domAtom() { return true; }
  1479. get ignoreForCoords() { return this.dom.nodeName == "IMG"; }
  1480. }
  1481. // A separate subclass is used for customized node views, so that the
  1482. // extra checks only have to be made for nodes that are actually
  1483. // customized.
  1484. class CustomNodeViewDesc extends NodeViewDesc {
  1485. constructor(parent, node, outerDeco, innerDeco, dom, contentDOM, nodeDOM, spec, view, pos) {
  1486. super(parent, node, outerDeco, innerDeco, dom, contentDOM, nodeDOM, view, pos);
  1487. this.spec = spec;
  1488. }
  1489. // A custom `update` method gets to decide whether the update goes
  1490. // through. If it does, and there's a `contentDOM` node, our logic
  1491. // updates the children.
  1492. update(node, outerDeco, innerDeco, view) {
  1493. if (this.dirty == NODE_DIRTY)
  1494. return false;
  1495. if (this.spec.update) {
  1496. let result = this.spec.update(node, outerDeco, innerDeco);
  1497. if (result)
  1498. this.updateInner(node, outerDeco, innerDeco, view);
  1499. return result;
  1500. }
  1501. else if (!this.contentDOM && !node.isLeaf) {
  1502. return false;
  1503. }
  1504. else {
  1505. return super.update(node, outerDeco, innerDeco, view);
  1506. }
  1507. }
  1508. selectNode() {
  1509. this.spec.selectNode ? this.spec.selectNode() : super.selectNode();
  1510. }
  1511. deselectNode() {
  1512. this.spec.deselectNode ? this.spec.deselectNode() : super.deselectNode();
  1513. }
  1514. setSelection(anchor, head, root, force) {
  1515. this.spec.setSelection ? this.spec.setSelection(anchor, head, root)
  1516. : super.setSelection(anchor, head, root, force);
  1517. }
  1518. destroy() {
  1519. if (this.spec.destroy)
  1520. this.spec.destroy();
  1521. super.destroy();
  1522. }
  1523. stopEvent(event) {
  1524. return this.spec.stopEvent ? this.spec.stopEvent(event) : false;
  1525. }
  1526. ignoreMutation(mutation) {
  1527. return this.spec.ignoreMutation ? this.spec.ignoreMutation(mutation) : super.ignoreMutation(mutation);
  1528. }
  1529. }
  1530. // Sync the content of the given DOM node with the nodes associated
  1531. // with the given array of view descs, recursing into mark descs
  1532. // because this should sync the subtree for a whole node at a time.
  1533. function renderDescs(parentDOM, descs, view) {
  1534. let dom = parentDOM.firstChild, written = false;
  1535. for (let i = 0; i < descs.length; i++) {
  1536. let desc = descs[i], childDOM = desc.dom;
  1537. if (childDOM.parentNode == parentDOM) {
  1538. while (childDOM != dom) {
  1539. dom = rm(dom);
  1540. written = true;
  1541. }
  1542. dom = dom.nextSibling;
  1543. }
  1544. else {
  1545. written = true;
  1546. parentDOM.insertBefore(childDOM, dom);
  1547. }
  1548. if (desc instanceof MarkViewDesc) {
  1549. let pos = dom ? dom.previousSibling : parentDOM.lastChild;
  1550. renderDescs(desc.contentDOM, desc.children, view);
  1551. dom = pos ? pos.nextSibling : parentDOM.firstChild;
  1552. }
  1553. }
  1554. while (dom) {
  1555. dom = rm(dom);
  1556. written = true;
  1557. }
  1558. if (written && view.trackWrites == parentDOM)
  1559. view.trackWrites = null;
  1560. }
  1561. const OuterDecoLevel = function (nodeName) {
  1562. if (nodeName)
  1563. this.nodeName = nodeName;
  1564. };
  1565. OuterDecoLevel.prototype = Object.create(null);
  1566. const noDeco = [new OuterDecoLevel];
  1567. function computeOuterDeco(outerDeco, node, needsWrap) {
  1568. if (outerDeco.length == 0)
  1569. return noDeco;
  1570. let top = needsWrap ? noDeco[0] : new OuterDecoLevel, result = [top];
  1571. for (let i = 0; i < outerDeco.length; i++) {
  1572. let attrs = outerDeco[i].type.attrs;
  1573. if (!attrs)
  1574. continue;
  1575. if (attrs.nodeName)
  1576. result.push(top = new OuterDecoLevel(attrs.nodeName));
  1577. for (let name in attrs) {
  1578. let val = attrs[name];
  1579. if (val == null)
  1580. continue;
  1581. if (needsWrap && result.length == 1)
  1582. result.push(top = new OuterDecoLevel(node.isInline ? "span" : "div"));
  1583. if (name == "class")
  1584. top.class = (top.class ? top.class + " " : "") + val;
  1585. else if (name == "style")
  1586. top.style = (top.style ? top.style + ";" : "") + val;
  1587. else if (name != "nodeName")
  1588. top[name] = val;
  1589. }
  1590. }
  1591. return result;
  1592. }
  1593. function patchOuterDeco(outerDOM, nodeDOM, prevComputed, curComputed) {
  1594. // Shortcut for trivial case
  1595. if (prevComputed == noDeco && curComputed == noDeco)
  1596. return nodeDOM;
  1597. let curDOM = nodeDOM;
  1598. for (let i = 0; i < curComputed.length; i++) {
  1599. let deco = curComputed[i], prev = prevComputed[i];
  1600. if (i) {
  1601. let parent;
  1602. if (prev && prev.nodeName == deco.nodeName && curDOM != outerDOM &&
  1603. (parent = curDOM.parentNode) && parent.nodeName.toLowerCase() == deco.nodeName) {
  1604. curDOM = parent;
  1605. }
  1606. else {
  1607. parent = document.createElement(deco.nodeName);
  1608. parent.pmIsDeco = true;
  1609. parent.appendChild(curDOM);
  1610. prev = noDeco[0];
  1611. curDOM = parent;
  1612. }
  1613. }
  1614. patchAttributes(curDOM, prev || noDeco[0], deco);
  1615. }
  1616. return curDOM;
  1617. }
  1618. function patchAttributes(dom, prev, cur) {
  1619. for (let name in prev)
  1620. if (name != "class" && name != "style" && name != "nodeName" && !(name in cur))
  1621. dom.removeAttribute(name);
  1622. for (let name in cur)
  1623. if (name != "class" && name != "style" && name != "nodeName" && cur[name] != prev[name])
  1624. dom.setAttribute(name, cur[name]);
  1625. if (prev.class != cur.class) {
  1626. let prevList = prev.class ? prev.class.split(" ").filter(Boolean) : [];
  1627. let curList = cur.class ? cur.class.split(" ").filter(Boolean) : [];
  1628. for (let i = 0; i < prevList.length; i++)
  1629. if (curList.indexOf(prevList[i]) == -1)
  1630. dom.classList.remove(prevList[i]);
  1631. for (let i = 0; i < curList.length; i++)
  1632. if (prevList.indexOf(curList[i]) == -1)
  1633. dom.classList.add(curList[i]);
  1634. if (dom.classList.length == 0)
  1635. dom.removeAttribute("class");
  1636. }
  1637. if (prev.style != cur.style) {
  1638. if (prev.style) {
  1639. let prop = /\s*([\w\-\xa1-\uffff]+)\s*:(?:"(?:\\.|[^"])*"|'(?:\\.|[^'])*'|\(.*?\)|[^;])*/g, m;
  1640. while (m = prop.exec(prev.style))
  1641. dom.style.removeProperty(m[1]);
  1642. }
  1643. if (cur.style)
  1644. dom.style.cssText += cur.style;
  1645. }
  1646. }
  1647. function applyOuterDeco(dom, deco, node) {
  1648. return patchOuterDeco(dom, dom, noDeco, computeOuterDeco(deco, node, dom.nodeType != 1));
  1649. }
  1650. function sameOuterDeco(a, b) {
  1651. if (a.length != b.length)
  1652. return false;
  1653. for (let i = 0; i < a.length; i++)
  1654. if (!a[i].type.eq(b[i].type))
  1655. return false;
  1656. return true;
  1657. }
  1658. // Remove a DOM node and return its next sibling.
  1659. function rm(dom) {
  1660. let next = dom.nextSibling;
  1661. dom.parentNode.removeChild(dom);
  1662. return next;
  1663. }
  1664. // Helper class for incrementally updating a tree of mark descs and
  1665. // the widget and node descs inside of them.
  1666. class ViewTreeUpdater {
  1667. constructor(top, lock, view) {
  1668. this.lock = lock;
  1669. this.view = view;
  1670. // Index into `this.top`'s child array, represents the current
  1671. // update position.
  1672. this.index = 0;
  1673. // When entering a mark, the current top and index are pushed
  1674. // onto this.
  1675. this.stack = [];
  1676. // Tracks whether anything was changed
  1677. this.changed = false;
  1678. this.top = top;
  1679. this.preMatch = preMatch(top.node.content, top);
  1680. }
  1681. // Destroy and remove the children between the given indices in
  1682. // `this.top`.
  1683. destroyBetween(start, end) {
  1684. if (start == end)
  1685. return;
  1686. for (let i = start; i < end; i++)
  1687. this.top.children[i].destroy();
  1688. this.top.children.splice(start, end - start);
  1689. this.changed = true;
  1690. }
  1691. // Destroy all remaining children in `this.top`.
  1692. destroyRest() {
  1693. this.destroyBetween(this.index, this.top.children.length);
  1694. }
  1695. // Sync the current stack of mark descs with the given array of
  1696. // marks, reusing existing mark descs when possible.
  1697. syncToMarks(marks, inline, view) {
  1698. let keep = 0, depth = this.stack.length >> 1;
  1699. let maxKeep = Math.min(depth, marks.length);
  1700. while (keep < maxKeep &&
  1701. (keep == depth - 1 ? this.top : this.stack[(keep + 1) << 1])
  1702. .matchesMark(marks[keep]) && marks[keep].type.spec.spanning !== false)
  1703. keep++;
  1704. while (keep < depth) {
  1705. this.destroyRest();
  1706. this.top.dirty = NOT_DIRTY;
  1707. this.index = this.stack.pop();
  1708. this.top = this.stack.pop();
  1709. depth--;
  1710. }
  1711. while (depth < marks.length) {
  1712. this.stack.push(this.top, this.index + 1);
  1713. let found = -1;
  1714. for (let i = this.index; i < Math.min(this.index + 3, this.top.children.length); i++) {
  1715. let next = this.top.children[i];
  1716. if (next.matchesMark(marks[depth]) && !this.isLocked(next.dom)) {
  1717. found = i;
  1718. break;
  1719. }
  1720. }
  1721. if (found > -1) {
  1722. if (found > this.index) {
  1723. this.changed = true;
  1724. this.destroyBetween(this.index, found);
  1725. }
  1726. this.top = this.top.children[this.index];
  1727. }
  1728. else {
  1729. let markDesc = MarkViewDesc.create(this.top, marks[depth], inline, view);
  1730. this.top.children.splice(this.index, 0, markDesc);
  1731. this.top = markDesc;
  1732. this.changed = true;
  1733. }
  1734. this.index = 0;
  1735. depth++;
  1736. }
  1737. }
  1738. // Try to find a node desc matching the given data. Skip over it and
  1739. // return true when successful.
  1740. findNodeMatch(node, outerDeco, innerDeco, index) {
  1741. let found = -1, targetDesc;
  1742. if (index >= this.preMatch.index &&
  1743. (targetDesc = this.preMatch.matches[index - this.preMatch.index]).parent == this.top &&
  1744. targetDesc.matchesNode(node, outerDeco, innerDeco)) {
  1745. found = this.top.children.indexOf(targetDesc, this.index);
  1746. }
  1747. else {
  1748. for (let i = this.index, e = Math.min(this.top.children.length, i + 5); i < e; i++) {
  1749. let child = this.top.children[i];
  1750. if (child.matchesNode(node, outerDeco, innerDeco) && !this.preMatch.matched.has(child)) {
  1751. found = i;
  1752. break;
  1753. }
  1754. }
  1755. }
  1756. if (found < 0)
  1757. return false;
  1758. this.destroyBetween(this.index, found);
  1759. this.index++;
  1760. return true;
  1761. }
  1762. updateNodeAt(node, outerDeco, innerDeco, index, view) {
  1763. let child = this.top.children[index];
  1764. if (child.dirty == NODE_DIRTY && child.dom == child.contentDOM)
  1765. child.dirty = CONTENT_DIRTY;
  1766. if (!child.update(node, outerDeco, innerDeco, view))
  1767. return false;
  1768. this.destroyBetween(this.index, index);
  1769. this.index++;
  1770. return true;
  1771. }
  1772. findIndexWithChild(domNode) {
  1773. for (;;) {
  1774. let parent = domNode.parentNode;
  1775. if (!parent)
  1776. return -1;
  1777. if (parent == this.top.contentDOM) {
  1778. let desc = domNode.pmViewDesc;
  1779. if (desc)
  1780. for (let i = this.index; i < this.top.children.length; i++) {
  1781. if (this.top.children[i] == desc)
  1782. return i;
  1783. }
  1784. return -1;
  1785. }
  1786. domNode = parent;
  1787. }
  1788. }
  1789. // Try to update the next node, if any, to the given data. Checks
  1790. // pre-matches to avoid overwriting nodes that could still be used.
  1791. updateNextNode(node, outerDeco, innerDeco, view, index, pos) {
  1792. for (let i = this.index; i < this.top.children.length; i++) {
  1793. let next = this.top.children[i];
  1794. if (next instanceof NodeViewDesc) {
  1795. let preMatch = this.preMatch.matched.get(next);
  1796. if (preMatch != null && preMatch != index)
  1797. return false;
  1798. let nextDOM = next.dom, updated;
  1799. // Can't update if nextDOM is or contains this.lock, except if
  1800. // it's a text node whose content already matches the new text
  1801. // and whose decorations match the new ones.
  1802. let locked = this.isLocked(nextDOM) &&
  1803. !(node.isText && next.node && next.node.isText && next.nodeDOM.nodeValue == node.text &&
  1804. next.dirty != NODE_DIRTY && sameOuterDeco(outerDeco, next.outerDeco));
  1805. if (!locked && next.update(node, outerDeco, innerDeco, view)) {
  1806. this.destroyBetween(this.index, i);
  1807. if (next.dom != nextDOM)
  1808. this.changed = true;
  1809. this.index++;
  1810. return true;
  1811. }
  1812. else if (!locked && (updated = this.recreateWrapper(next, node, outerDeco, innerDeco, view, pos))) {
  1813. this.top.children[this.index] = updated;
  1814. if (updated.contentDOM) {
  1815. updated.dirty = CONTENT_DIRTY;
  1816. updated.updateChildren(view, pos + 1);
  1817. updated.dirty = NOT_DIRTY;
  1818. }
  1819. this.changed = true;
  1820. this.index++;
  1821. return true;
  1822. }
  1823. break;
  1824. }
  1825. }
  1826. return false;
  1827. }
  1828. // When a node with content is replaced by a different node with
  1829. // identical content, move over its children.
  1830. recreateWrapper(next, node, outerDeco, innerDeco, view, pos) {
  1831. if (next.dirty || node.isAtom || !next.children.length ||
  1832. !next.node.content.eq(node.content))
  1833. return null;
  1834. let wrapper = NodeViewDesc.create(this.top, node, outerDeco, innerDeco, view, pos);
  1835. if (wrapper.contentDOM) {
  1836. wrapper.children = next.children;
  1837. next.children = [];
  1838. for (let ch of wrapper.children)
  1839. ch.parent = wrapper;
  1840. }
  1841. next.destroy();
  1842. return wrapper;
  1843. }
  1844. // Insert the node as a newly created node desc.
  1845. addNode(node, outerDeco, innerDeco, view, pos) {
  1846. let desc = NodeViewDesc.create(this.top, node, outerDeco, innerDeco, view, pos);
  1847. if (desc.contentDOM)
  1848. desc.updateChildren(view, pos + 1);
  1849. this.top.children.splice(this.index++, 0, desc);
  1850. this.changed = true;
  1851. }
  1852. placeWidget(widget, view, pos) {
  1853. let next = this.index < this.top.children.length ? this.top.children[this.index] : null;
  1854. if (next && next.matchesWidget(widget) &&
  1855. (widget == next.widget || !next.widget.type.toDOM.parentNode)) {
  1856. this.index++;
  1857. }
  1858. else {
  1859. let desc = new WidgetViewDesc(this.top, widget, view, pos);
  1860. this.top.children.splice(this.index++, 0, desc);
  1861. this.changed = true;
  1862. }
  1863. }
  1864. // Make sure a textblock looks and behaves correctly in
  1865. // contentEditable.
  1866. addTextblockHacks() {
  1867. let lastChild = this.top.children[this.index - 1], parent = this.top;
  1868. while (lastChild instanceof MarkViewDesc) {
  1869. parent = lastChild;
  1870. lastChild = parent.children[parent.children.length - 1];
  1871. }
  1872. if (!lastChild || // Empty textblock
  1873. !(lastChild instanceof TextViewDesc) ||
  1874. /\n$/.test(lastChild.node.text) ||
  1875. (this.view.requiresGeckoHackNode && /\s$/.test(lastChild.node.text))) {
  1876. // Avoid bugs in Safari's cursor drawing (#1165) and Chrome's mouse selection (#1152)
  1877. if ((safari || chrome) && lastChild && lastChild.dom.contentEditable == "false")
  1878. this.addHackNode("IMG", parent);
  1879. this.addHackNode("BR", this.top);
  1880. }
  1881. }
  1882. addHackNode(nodeName, parent) {
  1883. if (parent == this.top && this.index < parent.children.length && parent.children[this.index].matchesHack(nodeName)) {
  1884. this.index++;
  1885. }
  1886. else {
  1887. let dom = document.createElement(nodeName);
  1888. if (nodeName == "IMG") {
  1889. dom.className = "ProseMirror-separator";
  1890. dom.alt = "";
  1891. }
  1892. if (nodeName == "BR")
  1893. dom.className = "ProseMirror-trailingBreak";
  1894. let hack = new TrailingHackViewDesc(this.top, [], dom, null);
  1895. if (parent != this.top)
  1896. parent.children.push(hack);
  1897. else
  1898. parent.children.splice(this.index++, 0, hack);
  1899. this.changed = true;
  1900. }
  1901. }
  1902. isLocked(node) {
  1903. return this.lock && (node == this.lock || node.nodeType == 1 && node.contains(this.lock.parentNode));
  1904. }
  1905. }
  1906. // Iterate from the end of the fragment and array of descs to find
  1907. // directly matching ones, in order to avoid overeagerly reusing those
  1908. // for other nodes. Returns the fragment index of the first node that
  1909. // is part of the sequence of matched nodes at the end of the
  1910. // fragment.
  1911. function preMatch(frag, parentDesc) {
  1912. let curDesc = parentDesc, descI = curDesc.children.length;
  1913. let fI = frag.childCount, matched = new Map, matches = [];
  1914. outer: while (fI > 0) {
  1915. let desc;
  1916. for (;;) {
  1917. if (descI) {
  1918. let next = curDesc.children[descI - 1];
  1919. if (next instanceof MarkViewDesc) {
  1920. curDesc = next;
  1921. descI = next.children.length;
  1922. }
  1923. else {
  1924. desc = next;
  1925. descI--;
  1926. break;
  1927. }
  1928. }
  1929. else if (curDesc == parentDesc) {
  1930. break outer;
  1931. }
  1932. else {
  1933. // FIXME
  1934. descI = curDesc.parent.children.indexOf(curDesc);
  1935. curDesc = curDesc.parent;
  1936. }
  1937. }
  1938. let node = desc.node;
  1939. if (!node)
  1940. continue;
  1941. if (node != frag.child(fI - 1))
  1942. break;
  1943. --fI;
  1944. matched.set(desc, fI);
  1945. matches.push(desc);
  1946. }
  1947. return { index: fI, matched, matches: matches.reverse() };
  1948. }
  1949. function compareSide(a, b) {
  1950. return a.type.side - b.type.side;
  1951. }
  1952. // This function abstracts iterating over the nodes and decorations in
  1953. // a fragment. Calls `onNode` for each node, with its local and child
  1954. // decorations. Splits text nodes when there is a decoration starting
  1955. // or ending inside of them. Calls `onWidget` for each widget.
  1956. function iterDeco(parent, deco, onWidget, onNode) {
  1957. let locals = deco.locals(parent), offset = 0;
  1958. // Simple, cheap variant for when there are no local decorations
  1959. if (locals.length == 0) {
  1960. for (let i = 0; i < parent.childCount; i++) {
  1961. let child = parent.child(i);
  1962. onNode(child, locals, deco.forChild(offset, child), i);
  1963. offset += child.nodeSize;
  1964. }
  1965. return;
  1966. }
  1967. let decoIndex = 0, active = [], restNode = null;
  1968. for (let parentIndex = 0;;) {
  1969. let widget, widgets;
  1970. while (decoIndex < locals.length && locals[decoIndex].to == offset) {
  1971. let next = locals[decoIndex++];
  1972. if (next.widget) {
  1973. if (!widget)
  1974. widget = next;
  1975. else
  1976. (widgets || (widgets = [widget])).push(next);
  1977. }
  1978. }
  1979. if (widget) {
  1980. if (widgets) {
  1981. widgets.sort(compareSide);
  1982. for (let i = 0; i < widgets.length; i++)
  1983. onWidget(widgets[i], parentIndex, !!restNode);
  1984. }
  1985. else {
  1986. onWidget(widget, parentIndex, !!restNode);
  1987. }
  1988. }
  1989. let child, index;
  1990. if (restNode) {
  1991. index = -1;
  1992. child = restNode;
  1993. restNode = null;
  1994. }
  1995. else if (parentIndex < parent.childCount) {
  1996. index = parentIndex;
  1997. child = parent.child(parentIndex++);
  1998. }
  1999. else {
  2000. break;
  2001. }
  2002. for (let i = 0; i < active.length; i++)
  2003. if (active[i].to <= offset)
  2004. active.splice(i--, 1);
  2005. while (decoIndex < locals.length && locals[decoIndex].from <= offset && locals[decoIndex].to > offset)
  2006. active.push(locals[decoIndex++]);
  2007. let end = offset + child.nodeSize;
  2008. if (child.isText) {
  2009. let cutAt = end;
  2010. if (decoIndex < locals.length && locals[decoIndex].from < cutAt)
  2011. cutAt = locals[decoIndex].from;
  2012. for (let i = 0; i < active.length; i++)
  2013. if (active[i].to < cutAt)
  2014. cutAt = active[i].to;
  2015. if (cutAt < end) {
  2016. restNode = child.cut(cutAt - offset);
  2017. child = child.cut(0, cutAt - offset);
  2018. end = cutAt;
  2019. index = -1;
  2020. }
  2021. }
  2022. else {
  2023. while (decoIndex < locals.length && locals[decoIndex].to < end)
  2024. decoIndex++;
  2025. }
  2026. let outerDeco = child.isInline && !child.isLeaf ? active.filter(d => !d.inline) : active.slice();
  2027. onNode(child, outerDeco, deco.forChild(offset, child), index);
  2028. offset = end;
  2029. }
  2030. }
  2031. // List markers in Mobile Safari will mysteriously disappear
  2032. // sometimes. This works around that.
  2033. function iosHacks(dom) {
  2034. if (dom.nodeName == "UL" || dom.nodeName == "OL") {
  2035. let oldCSS = dom.style.cssText;
  2036. dom.style.cssText = oldCSS + "; list-style: square !important";
  2037. window.getComputedStyle(dom).listStyle;
  2038. dom.style.cssText = oldCSS;
  2039. }
  2040. }
  2041. function nearbyTextNode(node, offset) {
  2042. for (;;) {
  2043. if (node.nodeType == 3)
  2044. return node;
  2045. if (node.nodeType == 1 && offset > 0) {
  2046. if (node.childNodes.length > offset && node.childNodes[offset].nodeType == 3)
  2047. return node.childNodes[offset];
  2048. node = node.childNodes[offset - 1];
  2049. offset = nodeSize(node);
  2050. }
  2051. else if (node.nodeType == 1 && offset < node.childNodes.length) {
  2052. node = node.childNodes[offset];
  2053. offset = 0;
  2054. }
  2055. else {
  2056. return null;
  2057. }
  2058. }
  2059. }
  2060. // Find a piece of text in an inline fragment, overlapping from-to
  2061. function findTextInFragment(frag, text, from, to) {
  2062. for (let i = 0, pos = 0; i < frag.childCount && pos <= to;) {
  2063. let child = frag.child(i++), childStart = pos;
  2064. pos += child.nodeSize;
  2065. if (!child.isText)
  2066. continue;
  2067. let str = child.text;
  2068. while (i < frag.childCount) {
  2069. let next = frag.child(i++);
  2070. pos += next.nodeSize;
  2071. if (!next.isText)
  2072. break;
  2073. str += next.text;
  2074. }
  2075. if (pos >= from) {
  2076. if (pos >= to && str.slice(to - text.length - childStart, to - childStart) == text)
  2077. return to - text.length;
  2078. let found = childStart < to ? str.lastIndexOf(text, to - childStart - 1) : -1;
  2079. if (found >= 0 && found + text.length + childStart >= from)
  2080. return childStart + found;
  2081. if (from == to && str.length >= (to + text.length) - childStart &&
  2082. str.slice(to - childStart, to - childStart + text.length) == text)
  2083. return to;
  2084. }
  2085. }
  2086. return -1;
  2087. }
  2088. // Replace range from-to in an array of view descs with replacement
  2089. // (may be null to just delete). This goes very much against the grain
  2090. // of the rest of this code, which tends to create nodes with the
  2091. // right shape in one go, rather than messing with them after
  2092. // creation, but is necessary in the composition hack.
  2093. function replaceNodes(nodes, from, to, view, replacement) {
  2094. let result = [];
  2095. for (let i = 0, off = 0; i < nodes.length; i++) {
  2096. let child = nodes[i], start = off, end = off += child.size;
  2097. if (start >= to || end <= from) {
  2098. result.push(child);
  2099. }
  2100. else {
  2101. if (start < from)
  2102. result.push(child.slice(0, from - start, view));
  2103. if (replacement) {
  2104. result.push(replacement);
  2105. replacement = undefined;
  2106. }
  2107. if (end > to)
  2108. result.push(child.slice(to - start, child.size, view));
  2109. }
  2110. }
  2111. return result;
  2112. }
  2113. function selectionFromDOM(view, origin = null) {
  2114. let domSel = view.domSelectionRange(), doc = view.state.doc;
  2115. if (!domSel.focusNode)
  2116. return null;
  2117. let nearestDesc = view.docView.nearestDesc(domSel.focusNode), inWidget = nearestDesc && nearestDesc.size == 0;
  2118. let head = view.docView.posFromDOM(domSel.focusNode, domSel.focusOffset, 1);
  2119. if (head < 0)
  2120. return null;
  2121. let $head = doc.resolve(head), $anchor, selection;
  2122. if (selectionCollapsed(domSel)) {
  2123. $anchor = $head;
  2124. while (nearestDesc && !nearestDesc.node)
  2125. nearestDesc = nearestDesc.parent;
  2126. let nearestDescNode = nearestDesc.node;
  2127. if (nearestDesc && nearestDescNode.isAtom && NodeSelection.isSelectable(nearestDescNode) && nearestDesc.parent
  2128. && !(nearestDescNode.isInline && isOnEdge(domSel.focusNode, domSel.focusOffset, nearestDesc.dom))) {
  2129. let pos = nearestDesc.posBefore;
  2130. selection = new NodeSelection(head == pos ? $head : doc.resolve(pos));
  2131. }
  2132. }
  2133. else {
  2134. let anchor = view.docView.posFromDOM(domSel.anchorNode, domSel.anchorOffset, 1);
  2135. if (anchor < 0)
  2136. return null;
  2137. $anchor = doc.resolve(anchor);
  2138. }
  2139. if (!selection) {
  2140. let bias = origin == "pointer" || (view.state.selection.head < $head.pos && !inWidget) ? 1 : -1;
  2141. selection = selectionBetween(view, $anchor, $head, bias);
  2142. }
  2143. return selection;
  2144. }
  2145. function editorOwnsSelection(view) {
  2146. return view.editable ? view.hasFocus() :
  2147. hasSelection(view) && document.activeElement && document.activeElement.contains(view.dom);
  2148. }
  2149. function selectionToDOM(view, force = false) {
  2150. let sel = view.state.selection;
  2151. syncNodeSelection(view, sel);
  2152. if (!editorOwnsSelection(view))
  2153. return;
  2154. // The delayed drag selection causes issues with Cell Selections
  2155. // in Safari. And the drag selection delay is to workarond issues
  2156. // which only present in Chrome.
  2157. if (!force && view.input.mouseDown && view.input.mouseDown.allowDefault && chrome) {
  2158. let domSel = view.domSelectionRange(), curSel = view.domObserver.currentSelection;
  2159. if (domSel.anchorNode && curSel.anchorNode &&
  2160. isEquivalentPosition(domSel.anchorNode, domSel.anchorOffset, curSel.anchorNode, curSel.anchorOffset)) {
  2161. view.input.mouseDown.delayedSelectionSync = true;
  2162. view.domObserver.setCurSelection();
  2163. return;
  2164. }
  2165. }
  2166. view.domObserver.disconnectSelection();
  2167. if (view.cursorWrapper) {
  2168. selectCursorWrapper(view);
  2169. }
  2170. else {
  2171. let { anchor, head } = sel, resetEditableFrom, resetEditableTo;
  2172. if (brokenSelectBetweenUneditable && !(sel instanceof TextSelection)) {
  2173. if (!sel.$from.parent.inlineContent)
  2174. resetEditableFrom = temporarilyEditableNear(view, sel.from);
  2175. if (!sel.empty && !sel.$from.parent.inlineContent)
  2176. resetEditableTo = temporarilyEditableNear(view, sel.to);
  2177. }
  2178. view.docView.setSelection(anchor, head, view.root, force);
  2179. if (brokenSelectBetweenUneditable) {
  2180. if (resetEditableFrom)
  2181. resetEditable(resetEditableFrom);
  2182. if (resetEditableTo)
  2183. resetEditable(resetEditableTo);
  2184. }
  2185. if (sel.visible) {
  2186. view.dom.classList.remove("ProseMirror-hideselection");
  2187. }
  2188. else {
  2189. view.dom.classList.add("ProseMirror-hideselection");
  2190. if ("onselectionchange" in document)
  2191. removeClassOnSelectionChange(view);
  2192. }
  2193. }
  2194. view.domObserver.setCurSelection();
  2195. view.domObserver.connectSelection();
  2196. }
  2197. // Kludge to work around Webkit not allowing a selection to start/end
  2198. // between non-editable block nodes. We briefly make something
  2199. // editable, set the selection, then set it uneditable again.
  2200. const brokenSelectBetweenUneditable = safari || chrome && chrome_version < 63;
  2201. function temporarilyEditableNear(view, pos) {
  2202. let { node, offset } = view.docView.domFromPos(pos, 0);
  2203. let after = offset < node.childNodes.length ? node.childNodes[offset] : null;
  2204. let before = offset ? node.childNodes[offset - 1] : null;
  2205. if (safari && after && after.contentEditable == "false")
  2206. return setEditable(after);
  2207. if ((!after || after.contentEditable == "false") &&
  2208. (!before || before.contentEditable == "false")) {
  2209. if (after)
  2210. return setEditable(after);
  2211. else if (before)
  2212. return setEditable(before);
  2213. }
  2214. }
  2215. function setEditable(element) {
  2216. element.contentEditable = "true";
  2217. if (safari && element.draggable) {
  2218. element.draggable = false;
  2219. element.wasDraggable = true;
  2220. }
  2221. return element;
  2222. }
  2223. function resetEditable(element) {
  2224. element.contentEditable = "false";
  2225. if (element.wasDraggable) {
  2226. element.draggable = true;
  2227. element.wasDraggable = null;
  2228. }
  2229. }
  2230. function removeClassOnSelectionChange(view) {
  2231. let doc = view.dom.ownerDocument;
  2232. doc.removeEventListener("selectionchange", view.input.hideSelectionGuard);
  2233. let domSel = view.domSelectionRange();
  2234. let node = domSel.anchorNode, offset = domSel.anchorOffset;
  2235. doc.addEventListener("selectionchange", view.input.hideSelectionGuard = () => {
  2236. if (domSel.anchorNode != node || domSel.anchorOffset != offset) {
  2237. doc.removeEventListener("selectionchange", view.input.hideSelectionGuard);
  2238. setTimeout(() => {
  2239. if (!editorOwnsSelection(view) || view.state.selection.visible)
  2240. view.dom.classList.remove("ProseMirror-hideselection");
  2241. }, 20);
  2242. }
  2243. });
  2244. }
  2245. function selectCursorWrapper(view) {
  2246. let domSel = view.domSelection(), range = document.createRange();
  2247. let node = view.cursorWrapper.dom, img = node.nodeName == "IMG";
  2248. if (img)
  2249. range.setEnd(node.parentNode, domIndex(node) + 1);
  2250. else
  2251. range.setEnd(node, 0);
  2252. range.collapse(false);
  2253. domSel.removeAllRanges();
  2254. domSel.addRange(range);
  2255. // Kludge to kill 'control selection' in IE11 when selecting an
  2256. // invisible cursor wrapper, since that would result in those weird
  2257. // resize handles and a selection that considers the absolutely
  2258. // positioned wrapper, rather than the root editable node, the
  2259. // focused element.
  2260. if (!img && !view.state.selection.visible && ie && ie_version <= 11) {
  2261. node.disabled = true;
  2262. node.disabled = false;
  2263. }
  2264. }
  2265. function syncNodeSelection(view, sel) {
  2266. if (sel instanceof NodeSelection) {
  2267. let desc = view.docView.descAt(sel.from);
  2268. if (desc != view.lastSelectedViewDesc) {
  2269. clearNodeSelection(view);
  2270. if (desc)
  2271. desc.selectNode();
  2272. view.lastSelectedViewDesc = desc;
  2273. }
  2274. }
  2275. else {
  2276. clearNodeSelection(view);
  2277. }
  2278. }
  2279. // Clear all DOM statefulness of the last node selection.
  2280. function clearNodeSelection(view) {
  2281. if (view.lastSelectedViewDesc) {
  2282. if (view.lastSelectedViewDesc.parent)
  2283. view.lastSelectedViewDesc.deselectNode();
  2284. view.lastSelectedViewDesc = undefined;
  2285. }
  2286. }
  2287. function selectionBetween(view, $anchor, $head, bias) {
  2288. return view.someProp("createSelectionBetween", f => f(view, $anchor, $head))
  2289. || TextSelection.between($anchor, $head, bias);
  2290. }
  2291. function hasFocusAndSelection(view) {
  2292. if (view.editable && !view.hasFocus())
  2293. return false;
  2294. return hasSelection(view);
  2295. }
  2296. function hasSelection(view) {
  2297. let sel = view.domSelectionRange();
  2298. if (!sel.anchorNode)
  2299. return false;
  2300. try {
  2301. // Firefox will raise 'permission denied' errors when accessing
  2302. // properties of `sel.anchorNode` when it's in a generated CSS
  2303. // element.
  2304. return view.dom.contains(sel.anchorNode.nodeType == 3 ? sel.anchorNode.parentNode : sel.anchorNode) &&
  2305. (view.editable || view.dom.contains(sel.focusNode.nodeType == 3 ? sel.focusNode.parentNode : sel.focusNode));
  2306. }
  2307. catch (_) {
  2308. return false;
  2309. }
  2310. }
  2311. function anchorInRightPlace(view) {
  2312. let anchorDOM = view.docView.domFromPos(view.state.selection.anchor, 0);
  2313. let domSel = view.domSelectionRange();
  2314. return isEquivalentPosition(anchorDOM.node, anchorDOM.offset, domSel.anchorNode, domSel.anchorOffset);
  2315. }
  2316. function moveSelectionBlock(state, dir) {
  2317. let { $anchor, $head } = state.selection;
  2318. let $side = dir > 0 ? $anchor.max($head) : $anchor.min($head);
  2319. let $start = !$side.parent.inlineContent ? $side : $side.depth ? state.doc.resolve(dir > 0 ? $side.after() : $side.before()) : null;
  2320. return $start && Selection.findFrom($start, dir);
  2321. }
  2322. function apply(view, sel) {
  2323. view.dispatch(view.state.tr.setSelection(sel).scrollIntoView());
  2324. return true;
  2325. }
  2326. function selectHorizontally(view, dir, mods) {
  2327. let sel = view.state.selection;
  2328. if (sel instanceof TextSelection) {
  2329. if (mods.indexOf("s") > -1) {
  2330. let { $head } = sel, node = $head.textOffset ? null : dir < 0 ? $head.nodeBefore : $head.nodeAfter;
  2331. if (!node || node.isText || !node.isLeaf)
  2332. return false;
  2333. let $newHead = view.state.doc.resolve($head.pos + node.nodeSize * (dir < 0 ? -1 : 1));
  2334. return apply(view, new TextSelection(sel.$anchor, $newHead));
  2335. }
  2336. else if (!sel.empty) {
  2337. return false;
  2338. }
  2339. else if (view.endOfTextblock(dir > 0 ? "forward" : "backward")) {
  2340. let next = moveSelectionBlock(view.state, dir);
  2341. if (next && (next instanceof NodeSelection))
  2342. return apply(view, next);
  2343. return false;
  2344. }
  2345. else if (!(mac && mods.indexOf("m") > -1)) {
  2346. let $head = sel.$head, node = $head.textOffset ? null : dir < 0 ? $head.nodeBefore : $head.nodeAfter, desc;
  2347. if (!node || node.isText)
  2348. return false;
  2349. let nodePos = dir < 0 ? $head.pos - node.nodeSize : $head.pos;
  2350. if (!(node.isAtom || (desc = view.docView.descAt(nodePos)) && !desc.contentDOM))
  2351. return false;
  2352. if (NodeSelection.isSelectable(node)) {
  2353. return apply(view, new NodeSelection(dir < 0 ? view.state.doc.resolve($head.pos - node.nodeSize) : $head));
  2354. }
  2355. else if (webkit) {
  2356. // Chrome and Safari will introduce extra pointless cursor
  2357. // positions around inline uneditable nodes, so we have to
  2358. // take over and move the cursor past them (#937)
  2359. return apply(view, new TextSelection(view.state.doc.resolve(dir < 0 ? nodePos : nodePos + node.nodeSize)));
  2360. }
  2361. else {
  2362. return false;
  2363. }
  2364. }
  2365. }
  2366. else if (sel instanceof NodeSelection && sel.node.isInline) {
  2367. return apply(view, new TextSelection(dir > 0 ? sel.$to : sel.$from));
  2368. }
  2369. else {
  2370. let next = moveSelectionBlock(view.state, dir);
  2371. if (next)
  2372. return apply(view, next);
  2373. return false;
  2374. }
  2375. }
  2376. function nodeLen(node) {
  2377. return node.nodeType == 3 ? node.nodeValue.length : node.childNodes.length;
  2378. }
  2379. function isIgnorable(dom, dir) {
  2380. let desc = dom.pmViewDesc;
  2381. return desc && desc.size == 0 && (dir < 0 || dom.nextSibling || dom.nodeName != "BR");
  2382. }
  2383. function skipIgnoredNodes(view, dir) {
  2384. return dir < 0 ? skipIgnoredNodesBefore(view) : skipIgnoredNodesAfter(view);
  2385. }
  2386. // Make sure the cursor isn't directly after one or more ignored
  2387. // nodes, which will confuse the browser's cursor motion logic.
  2388. function skipIgnoredNodesBefore(view) {
  2389. let sel = view.domSelectionRange();
  2390. let node = sel.focusNode, offset = sel.focusOffset;
  2391. if (!node)
  2392. return;
  2393. let moveNode, moveOffset, force = false;
  2394. // Gecko will do odd things when the selection is directly in front
  2395. // of a non-editable node, so in that case, move it into the next
  2396. // node if possible. Issue prosemirror/prosemirror#832.
  2397. if (gecko && node.nodeType == 1 && offset < nodeLen(node) && isIgnorable(node.childNodes[offset], -1))
  2398. force = true;
  2399. for (;;) {
  2400. if (offset > 0) {
  2401. if (node.nodeType != 1) {
  2402. break;
  2403. }
  2404. else {
  2405. let before = node.childNodes[offset - 1];
  2406. if (isIgnorable(before, -1)) {
  2407. moveNode = node;
  2408. moveOffset = --offset;
  2409. }
  2410. else if (before.nodeType == 3) {
  2411. node = before;
  2412. offset = node.nodeValue.length;
  2413. }
  2414. else
  2415. break;
  2416. }
  2417. }
  2418. else if (isBlockNode(node)) {
  2419. break;
  2420. }
  2421. else {
  2422. let prev = node.previousSibling;
  2423. while (prev && isIgnorable(prev, -1)) {
  2424. moveNode = node.parentNode;
  2425. moveOffset = domIndex(prev);
  2426. prev = prev.previousSibling;
  2427. }
  2428. if (!prev) {
  2429. node = node.parentNode;
  2430. if (node == view.dom)
  2431. break;
  2432. offset = 0;
  2433. }
  2434. else {
  2435. node = prev;
  2436. offset = nodeLen(node);
  2437. }
  2438. }
  2439. }
  2440. if (force)
  2441. setSelFocus(view, node, offset);
  2442. else if (moveNode)
  2443. setSelFocus(view, moveNode, moveOffset);
  2444. }
  2445. // Make sure the cursor isn't directly before one or more ignored
  2446. // nodes.
  2447. function skipIgnoredNodesAfter(view) {
  2448. let sel = view.domSelectionRange();
  2449. let node = sel.focusNode, offset = sel.focusOffset;
  2450. if (!node)
  2451. return;
  2452. let len = nodeLen(node);
  2453. let moveNode, moveOffset;
  2454. for (;;) {
  2455. if (offset < len) {
  2456. if (node.nodeType != 1)
  2457. break;
  2458. let after = node.childNodes[offset];
  2459. if (isIgnorable(after, 1)) {
  2460. moveNode = node;
  2461. moveOffset = ++offset;
  2462. }
  2463. else
  2464. break;
  2465. }
  2466. else if (isBlockNode(node)) {
  2467. break;
  2468. }
  2469. else {
  2470. let next = node.nextSibling;
  2471. while (next && isIgnorable(next, 1)) {
  2472. moveNode = next.parentNode;
  2473. moveOffset = domIndex(next) + 1;
  2474. next = next.nextSibling;
  2475. }
  2476. if (!next) {
  2477. node = node.parentNode;
  2478. if (node == view.dom)
  2479. break;
  2480. offset = len = 0;
  2481. }
  2482. else {
  2483. node = next;
  2484. offset = 0;
  2485. len = nodeLen(node);
  2486. }
  2487. }
  2488. }
  2489. if (moveNode)
  2490. setSelFocus(view, moveNode, moveOffset);
  2491. }
  2492. function isBlockNode(dom) {
  2493. let desc = dom.pmViewDesc;
  2494. return desc && desc.node && desc.node.isBlock;
  2495. }
  2496. function textNodeAfter(node, offset) {
  2497. while (node && offset == node.childNodes.length && !hasBlockDesc(node)) {
  2498. offset = domIndex(node) + 1;
  2499. node = node.parentNode;
  2500. }
  2501. while (node && offset < node.childNodes.length) {
  2502. let next = node.childNodes[offset];
  2503. if (next.nodeType == 3)
  2504. return next;
  2505. if (next.nodeType == 1 && next.contentEditable == "false")
  2506. break;
  2507. node = next;
  2508. offset = 0;
  2509. }
  2510. }
  2511. function textNodeBefore(node, offset) {
  2512. while (node && !offset && !hasBlockDesc(node)) {
  2513. offset = domIndex(node);
  2514. node = node.parentNode;
  2515. }
  2516. while (node && offset) {
  2517. let next = node.childNodes[offset - 1];
  2518. if (next.nodeType == 3)
  2519. return next;
  2520. if (next.nodeType == 1 && next.contentEditable == "false")
  2521. break;
  2522. node = next;
  2523. offset = node.childNodes.length;
  2524. }
  2525. }
  2526. function setSelFocus(view, node, offset) {
  2527. if (node.nodeType != 3) {
  2528. let before, after;
  2529. if (after = textNodeAfter(node, offset)) {
  2530. node = after;
  2531. offset = 0;
  2532. }
  2533. else if (before = textNodeBefore(node, offset)) {
  2534. node = before;
  2535. offset = before.nodeValue.length;
  2536. }
  2537. }
  2538. let sel = view.domSelection();
  2539. if (selectionCollapsed(sel)) {
  2540. let range = document.createRange();
  2541. range.setEnd(node, offset);
  2542. range.setStart(node, offset);
  2543. sel.removeAllRanges();
  2544. sel.addRange(range);
  2545. }
  2546. else if (sel.extend) {
  2547. sel.extend(node, offset);
  2548. }
  2549. view.domObserver.setCurSelection();
  2550. let { state } = view;
  2551. // If no state update ends up happening, reset the selection.
  2552. setTimeout(() => {
  2553. if (view.state == state)
  2554. selectionToDOM(view);
  2555. }, 50);
  2556. }
  2557. function findDirection(view, pos) {
  2558. let $pos = view.state.doc.resolve(pos);
  2559. if (!(chrome || windows) && $pos.parent.inlineContent) {
  2560. let coords = view.coordsAtPos(pos);
  2561. if (pos > $pos.start()) {
  2562. let before = view.coordsAtPos(pos - 1);
  2563. let mid = (before.top + before.bottom) / 2;
  2564. if (mid > coords.top && mid < coords.bottom && Math.abs(before.left - coords.left) > 1)
  2565. return before.left < coords.left ? "ltr" : "rtl";
  2566. }
  2567. if (pos < $pos.end()) {
  2568. let after = view.coordsAtPos(pos + 1);
  2569. let mid = (after.top + after.bottom) / 2;
  2570. if (mid > coords.top && mid < coords.bottom && Math.abs(after.left - coords.left) > 1)
  2571. return after.left > coords.left ? "ltr" : "rtl";
  2572. }
  2573. }
  2574. let computed = getComputedStyle(view.dom).direction;
  2575. return computed == "rtl" ? "rtl" : "ltr";
  2576. }
  2577. // Check whether vertical selection motion would involve node
  2578. // selections. If so, apply it (if not, the result is left to the
  2579. // browser)
  2580. function selectVertically(view, dir, mods) {
  2581. let sel = view.state.selection;
  2582. if (sel instanceof TextSelection && !sel.empty || mods.indexOf("s") > -1)
  2583. return false;
  2584. if (mac && mods.indexOf("m") > -1)
  2585. return false;
  2586. let { $from, $to } = sel;
  2587. if (!$from.parent.inlineContent || view.endOfTextblock(dir < 0 ? "up" : "down")) {
  2588. let next = moveSelectionBlock(view.state, dir);
  2589. if (next && (next instanceof NodeSelection))
  2590. return apply(view, next);
  2591. }
  2592. if (!$from.parent.inlineContent) {
  2593. let side = dir < 0 ? $from : $to;
  2594. let beyond = sel instanceof AllSelection ? Selection.near(side, dir) : Selection.findFrom(side, dir);
  2595. return beyond ? apply(view, beyond) : false;
  2596. }
  2597. return false;
  2598. }
  2599. function stopNativeHorizontalDelete(view, dir) {
  2600. if (!(view.state.selection instanceof TextSelection))
  2601. return true;
  2602. let { $head, $anchor, empty } = view.state.selection;
  2603. if (!$head.sameParent($anchor))
  2604. return true;
  2605. if (!empty)
  2606. return false;
  2607. if (view.endOfTextblock(dir > 0 ? "forward" : "backward"))
  2608. return true;
  2609. let nextNode = !$head.textOffset && (dir < 0 ? $head.nodeBefore : $head.nodeAfter);
  2610. if (nextNode && !nextNode.isText) {
  2611. let tr = view.state.tr;
  2612. if (dir < 0)
  2613. tr.delete($head.pos - nextNode.nodeSize, $head.pos);
  2614. else
  2615. tr.delete($head.pos, $head.pos + nextNode.nodeSize);
  2616. view.dispatch(tr);
  2617. return true;
  2618. }
  2619. return false;
  2620. }
  2621. function switchEditable(view, node, state) {
  2622. view.domObserver.stop();
  2623. node.contentEditable = state;
  2624. view.domObserver.start();
  2625. }
  2626. // Issue #867 / #1090 / https://bugs.chromium.org/p/chromium/issues/detail?id=903821
  2627. // In which Safari (and at some point in the past, Chrome) does really
  2628. // wrong things when the down arrow is pressed when the cursor is
  2629. // directly at the start of a textblock and has an uneditable node
  2630. // after it
  2631. function safariDownArrowBug(view) {
  2632. if (!safari || view.state.selection.$head.parentOffset > 0)
  2633. return false;
  2634. let { focusNode, focusOffset } = view.domSelectionRange();
  2635. if (focusNode && focusNode.nodeType == 1 && focusOffset == 0 &&
  2636. focusNode.firstChild && focusNode.firstChild.contentEditable == "false") {
  2637. let child = focusNode.firstChild;
  2638. switchEditable(view, child, "true");
  2639. setTimeout(() => switchEditable(view, child, "false"), 20);
  2640. }
  2641. return false;
  2642. }
  2643. // A backdrop key mapping used to make sure we always suppress keys
  2644. // that have a dangerous default effect, even if the commands they are
  2645. // bound to return false, and to make sure that cursor-motion keys
  2646. // find a cursor (as opposed to a node selection) when pressed. For
  2647. // cursor-motion keys, the code in the handlers also takes care of
  2648. // block selections.
  2649. function getMods(event) {
  2650. let result = "";
  2651. if (event.ctrlKey)
  2652. result += "c";
  2653. if (event.metaKey)
  2654. result += "m";
  2655. if (event.altKey)
  2656. result += "a";
  2657. if (event.shiftKey)
  2658. result += "s";
  2659. return result;
  2660. }
  2661. function captureKeyDown(view, event) {
  2662. let code = event.keyCode, mods = getMods(event);
  2663. if (code == 8 || (mac && code == 72 && mods == "c")) { // Backspace, Ctrl-h on Mac
  2664. return stopNativeHorizontalDelete(view, -1) || skipIgnoredNodes(view, -1);
  2665. }
  2666. else if ((code == 46 && !event.shiftKey) || (mac && code == 68 && mods == "c")) { // Delete, Ctrl-d on Mac
  2667. return stopNativeHorizontalDelete(view, 1) || skipIgnoredNodes(view, 1);
  2668. }
  2669. else if (code == 13 || code == 27) { // Enter, Esc
  2670. return true;
  2671. }
  2672. else if (code == 37 || (mac && code == 66 && mods == "c")) { // Left arrow, Ctrl-b on Mac
  2673. let dir = code == 37 ? (findDirection(view, view.state.selection.from) == "ltr" ? -1 : 1) : -1;
  2674. return selectHorizontally(view, dir, mods) || skipIgnoredNodes(view, dir);
  2675. }
  2676. else if (code == 39 || (mac && code == 70 && mods == "c")) { // Right arrow, Ctrl-f on Mac
  2677. let dir = code == 39 ? (findDirection(view, view.state.selection.from) == "ltr" ? 1 : -1) : 1;
  2678. return selectHorizontally(view, dir, mods) || skipIgnoredNodes(view, dir);
  2679. }
  2680. else if (code == 38 || (mac && code == 80 && mods == "c")) { // Up arrow, Ctrl-p on Mac
  2681. return selectVertically(view, -1, mods) || skipIgnoredNodes(view, -1);
  2682. }
  2683. else if (code == 40 || (mac && code == 78 && mods == "c")) { // Down arrow, Ctrl-n on Mac
  2684. return safariDownArrowBug(view) || selectVertically(view, 1, mods) || skipIgnoredNodes(view, 1);
  2685. }
  2686. else if (mods == (mac ? "m" : "c") &&
  2687. (code == 66 || code == 73 || code == 89 || code == 90)) { // Mod-[biyz]
  2688. return true;
  2689. }
  2690. return false;
  2691. }
  2692. function serializeForClipboard(view, slice) {
  2693. view.someProp("transformCopied", f => { slice = f(slice, view); });
  2694. let context = [], { content, openStart, openEnd } = slice;
  2695. while (openStart > 1 && openEnd > 1 && content.childCount == 1 && content.firstChild.childCount == 1) {
  2696. openStart--;
  2697. openEnd--;
  2698. let node = content.firstChild;
  2699. context.push(node.type.name, node.attrs != node.type.defaultAttrs ? node.attrs : null);
  2700. content = node.content;
  2701. }
  2702. let serializer = view.someProp("clipboardSerializer") || DOMSerializer.fromSchema(view.state.schema);
  2703. let doc = detachedDoc(), wrap = doc.createElement("div");
  2704. wrap.appendChild(serializer.serializeFragment(content, { document: doc }));
  2705. let firstChild = wrap.firstChild, needsWrap, wrappers = 0;
  2706. while (firstChild && firstChild.nodeType == 1 && (needsWrap = wrapMap[firstChild.nodeName.toLowerCase()])) {
  2707. for (let i = needsWrap.length - 1; i >= 0; i--) {
  2708. let wrapper = doc.createElement(needsWrap[i]);
  2709. while (wrap.firstChild)
  2710. wrapper.appendChild(wrap.firstChild);
  2711. wrap.appendChild(wrapper);
  2712. wrappers++;
  2713. }
  2714. firstChild = wrap.firstChild;
  2715. }
  2716. if (firstChild && firstChild.nodeType == 1)
  2717. firstChild.setAttribute("data-pm-slice", `${openStart} ${openEnd}${wrappers ? ` -${wrappers}` : ""} ${JSON.stringify(context)}`);
  2718. let text = view.someProp("clipboardTextSerializer", f => f(slice, view)) ||
  2719. slice.content.textBetween(0, slice.content.size, "\n\n");
  2720. return { dom: wrap, text };
  2721. }
  2722. // Read a slice of content from the clipboard (or drop data).
  2723. function parseFromClipboard(view, text, html, plainText, $context) {
  2724. let inCode = $context.parent.type.spec.code;
  2725. let dom, slice;
  2726. if (!html && !text)
  2727. return null;
  2728. let asText = text && (plainText || inCode || !html);
  2729. if (asText) {
  2730. view.someProp("transformPastedText", f => { text = f(text, inCode || plainText, view); });
  2731. if (inCode)
  2732. return text ? new Slice(Fragment.from(view.state.schema.text(text.replace(/\r\n?/g, "\n"))), 0, 0) : Slice.empty;
  2733. let parsed = view.someProp("clipboardTextParser", f => f(text, $context, plainText, view));
  2734. if (parsed) {
  2735. slice = parsed;
  2736. }
  2737. else {
  2738. let marks = $context.marks();
  2739. let { schema } = view.state, serializer = DOMSerializer.fromSchema(schema);
  2740. dom = document.createElement("div");
  2741. text.split(/(?:\r\n?|\n)+/).forEach(block => {
  2742. let p = dom.appendChild(document.createElement("p"));
  2743. if (block)
  2744. p.appendChild(serializer.serializeNode(schema.text(block, marks)));
  2745. });
  2746. }
  2747. }
  2748. else {
  2749. view.someProp("transformPastedHTML", f => { html = f(html, view); });
  2750. dom = readHTML(html);
  2751. if (webkit)
  2752. restoreReplacedSpaces(dom);
  2753. }
  2754. let contextNode = dom && dom.querySelector("[data-pm-slice]");
  2755. let sliceData = contextNode && /^(\d+) (\d+)(?: -(\d+))? (.*)/.exec(contextNode.getAttribute("data-pm-slice") || "");
  2756. if (sliceData && sliceData[3])
  2757. for (let i = +sliceData[3]; i > 0; i--) {
  2758. let child = dom.firstChild;
  2759. while (child && child.nodeType != 1)
  2760. child = child.nextSibling;
  2761. if (!child)
  2762. break;
  2763. dom = child;
  2764. }
  2765. if (!slice) {
  2766. let parser = view.someProp("clipboardParser") || view.someProp("domParser") || DOMParser.fromSchema(view.state.schema);
  2767. slice = parser.parseSlice(dom, {
  2768. preserveWhitespace: !!(asText || sliceData),
  2769. context: $context,
  2770. ruleFromNode(dom) {
  2771. if (dom.nodeName == "BR" && !dom.nextSibling &&
  2772. dom.parentNode && !inlineParents.test(dom.parentNode.nodeName))
  2773. return { ignore: true };
  2774. return null;
  2775. }
  2776. });
  2777. }
  2778. if (sliceData) {
  2779. slice = addContext(closeSlice(slice, +sliceData[1], +sliceData[2]), sliceData[4]);
  2780. }
  2781. else { // HTML wasn't created by ProseMirror. Make sure top-level siblings are coherent
  2782. slice = Slice.maxOpen(normalizeSiblings(slice.content, $context), true);
  2783. if (slice.openStart || slice.openEnd) {
  2784. let openStart = 0, openEnd = 0;
  2785. for (let node = slice.content.firstChild; openStart < slice.openStart && !node.type.spec.isolating; openStart++, node = node.firstChild) { }
  2786. for (let node = slice.content.lastChild; openEnd < slice.openEnd && !node.type.spec.isolating; openEnd++, node = node.lastChild) { }
  2787. slice = closeSlice(slice, openStart, openEnd);
  2788. }
  2789. }
  2790. view.someProp("transformPasted", f => { slice = f(slice, view); });
  2791. return slice;
  2792. }
  2793. const inlineParents = /^(a|abbr|acronym|b|cite|code|del|em|i|ins|kbd|label|output|q|ruby|s|samp|span|strong|sub|sup|time|u|tt|var)$/i;
  2794. // Takes a slice parsed with parseSlice, which means there hasn't been
  2795. // any content-expression checking done on the top nodes, tries to
  2796. // find a parent node in the current context that might fit the nodes,
  2797. // and if successful, rebuilds the slice so that it fits into that parent.
  2798. //
  2799. // This addresses the problem that Transform.replace expects a
  2800. // coherent slice, and will fail to place a set of siblings that don't
  2801. // fit anywhere in the schema.
  2802. function normalizeSiblings(fragment, $context) {
  2803. if (fragment.childCount < 2)
  2804. return fragment;
  2805. for (let d = $context.depth; d >= 0; d--) {
  2806. let parent = $context.node(d);
  2807. let match = parent.contentMatchAt($context.index(d));
  2808. let lastWrap, result = [];
  2809. fragment.forEach(node => {
  2810. if (!result)
  2811. return;
  2812. let wrap = match.findWrapping(node.type), inLast;
  2813. if (!wrap)
  2814. return result = null;
  2815. if (inLast = result.length && lastWrap.length && addToSibling(wrap, lastWrap, node, result[result.length - 1], 0)) {
  2816. result[result.length - 1] = inLast;
  2817. }
  2818. else {
  2819. if (result.length)
  2820. result[result.length - 1] = closeRight(result[result.length - 1], lastWrap.length);
  2821. let wrapped = withWrappers(node, wrap);
  2822. result.push(wrapped);
  2823. match = match.matchType(wrapped.type);
  2824. lastWrap = wrap;
  2825. }
  2826. });
  2827. if (result)
  2828. return Fragment.from(result);
  2829. }
  2830. return fragment;
  2831. }
  2832. function withWrappers(node, wrap, from = 0) {
  2833. for (let i = wrap.length - 1; i >= from; i--)
  2834. node = wrap[i].create(null, Fragment.from(node));
  2835. return node;
  2836. }
  2837. // Used to group adjacent nodes wrapped in similar parents by
  2838. // normalizeSiblings into the same parent node
  2839. function addToSibling(wrap, lastWrap, node, sibling, depth) {
  2840. if (depth < wrap.length && depth < lastWrap.length && wrap[depth] == lastWrap[depth]) {
  2841. let inner = addToSibling(wrap, lastWrap, node, sibling.lastChild, depth + 1);
  2842. if (inner)
  2843. return sibling.copy(sibling.content.replaceChild(sibling.childCount - 1, inner));
  2844. let match = sibling.contentMatchAt(sibling.childCount);
  2845. if (match.matchType(depth == wrap.length - 1 ? node.type : wrap[depth + 1]))
  2846. return sibling.copy(sibling.content.append(Fragment.from(withWrappers(node, wrap, depth + 1))));
  2847. }
  2848. }
  2849. function closeRight(node, depth) {
  2850. if (depth == 0)
  2851. return node;
  2852. let fragment = node.content.replaceChild(node.childCount - 1, closeRight(node.lastChild, depth - 1));
  2853. let fill = node.contentMatchAt(node.childCount).fillBefore(Fragment.empty, true);
  2854. return node.copy(fragment.append(fill));
  2855. }
  2856. function closeRange(fragment, side, from, to, depth, openEnd) {
  2857. let node = side < 0 ? fragment.firstChild : fragment.lastChild, inner = node.content;
  2858. if (fragment.childCount > 1)
  2859. openEnd = 0;
  2860. if (depth < to - 1)
  2861. inner = closeRange(inner, side, from, to, depth + 1, openEnd);
  2862. if (depth >= from)
  2863. inner = side < 0 ? node.contentMatchAt(0).fillBefore(inner, openEnd <= depth).append(inner)
  2864. : inner.append(node.contentMatchAt(node.childCount).fillBefore(Fragment.empty, true));
  2865. return fragment.replaceChild(side < 0 ? 0 : fragment.childCount - 1, node.copy(inner));
  2866. }
  2867. function closeSlice(slice, openStart, openEnd) {
  2868. if (openStart < slice.openStart)
  2869. slice = new Slice(closeRange(slice.content, -1, openStart, slice.openStart, 0, slice.openEnd), openStart, slice.openEnd);
  2870. if (openEnd < slice.openEnd)
  2871. slice = new Slice(closeRange(slice.content, 1, openEnd, slice.openEnd, 0, 0), slice.openStart, openEnd);
  2872. return slice;
  2873. }
  2874. // Trick from jQuery -- some elements must be wrapped in other
  2875. // elements for innerHTML to work. I.e. if you do `div.innerHTML =
  2876. // "<td>..</td>"` the table cells are ignored.
  2877. const wrapMap = {
  2878. thead: ["table"],
  2879. tbody: ["table"],
  2880. tfoot: ["table"],
  2881. caption: ["table"],
  2882. colgroup: ["table"],
  2883. col: ["table", "colgroup"],
  2884. tr: ["table", "tbody"],
  2885. td: ["table", "tbody", "tr"],
  2886. th: ["table", "tbody", "tr"]
  2887. };
  2888. let _detachedDoc = null;
  2889. function detachedDoc() {
  2890. return _detachedDoc || (_detachedDoc = document.implementation.createHTMLDocument("title"));
  2891. }
  2892. function readHTML(html) {
  2893. let metas = /^(\s*<meta [^>]*>)*/.exec(html);
  2894. if (metas)
  2895. html = html.slice(metas[0].length);
  2896. let elt = detachedDoc().createElement("div");
  2897. let firstTag = /<([a-z][^>\s]+)/i.exec(html), wrap;
  2898. if (wrap = firstTag && wrapMap[firstTag[1].toLowerCase()])
  2899. html = wrap.map(n => "<" + n + ">").join("") + html + wrap.map(n => "</" + n + ">").reverse().join("");
  2900. elt.innerHTML = html;
  2901. if (wrap)
  2902. for (let i = 0; i < wrap.length; i++)
  2903. elt = elt.querySelector(wrap[i]) || elt;
  2904. return elt;
  2905. }
  2906. // Webkit browsers do some hard-to-predict replacement of regular
  2907. // spaces with non-breaking spaces when putting content on the
  2908. // clipboard. This tries to convert such non-breaking spaces (which
  2909. // will be wrapped in a plain span on Chrome, a span with class
  2910. // Apple-converted-space on Safari) back to regular spaces.
  2911. function restoreReplacedSpaces(dom) {
  2912. let nodes = dom.querySelectorAll(chrome ? "span:not([class]):not([style])" : "span.Apple-converted-space");
  2913. for (let i = 0; i < nodes.length; i++) {
  2914. let node = nodes[i];
  2915. if (node.childNodes.length == 1 && node.textContent == "\u00a0" && node.parentNode)
  2916. node.parentNode.replaceChild(dom.ownerDocument.createTextNode(" "), node);
  2917. }
  2918. }
  2919. function addContext(slice, context) {
  2920. if (!slice.size)
  2921. return slice;
  2922. let schema = slice.content.firstChild.type.schema, array;
  2923. try {
  2924. array = JSON.parse(context);
  2925. }
  2926. catch (e) {
  2927. return slice;
  2928. }
  2929. let { content, openStart, openEnd } = slice;
  2930. for (let i = array.length - 2; i >= 0; i -= 2) {
  2931. let type = schema.nodes[array[i]];
  2932. if (!type || type.hasRequiredAttrs())
  2933. break;
  2934. content = Fragment.from(type.create(array[i + 1], content));
  2935. openStart++;
  2936. openEnd++;
  2937. }
  2938. return new Slice(content, openStart, openEnd);
  2939. }
  2940. // A collection of DOM events that occur within the editor, and callback functions
  2941. // to invoke when the event fires.
  2942. const handlers = {};
  2943. const editHandlers = {};
  2944. const passiveHandlers = { touchstart: true, touchmove: true };
  2945. class InputState {
  2946. constructor() {
  2947. this.shiftKey = false;
  2948. this.mouseDown = null;
  2949. this.lastKeyCode = null;
  2950. this.lastKeyCodeTime = 0;
  2951. this.lastClick = { time: 0, x: 0, y: 0, type: "" };
  2952. this.lastSelectionOrigin = null;
  2953. this.lastSelectionTime = 0;
  2954. this.lastIOSEnter = 0;
  2955. this.lastIOSEnterFallbackTimeout = -1;
  2956. this.lastFocus = 0;
  2957. this.lastTouch = 0;
  2958. this.lastAndroidDelete = 0;
  2959. this.composing = false;
  2960. this.composingTimeout = -1;
  2961. this.compositionNodes = [];
  2962. this.compositionEndedAt = -2e8;
  2963. this.compositionID = 1;
  2964. // Set to a composition ID when there are pending changes at compositionend
  2965. this.compositionPendingChanges = 0;
  2966. this.domChangeCount = 0;
  2967. this.eventHandlers = Object.create(null);
  2968. this.hideSelectionGuard = null;
  2969. }
  2970. }
  2971. function initInput(view) {
  2972. for (let event in handlers) {
  2973. let handler = handlers[event];
  2974. view.dom.addEventListener(event, view.input.eventHandlers[event] = (event) => {
  2975. if (eventBelongsToView(view, event) && !runCustomHandler(view, event) &&
  2976. (view.editable || !(event.type in editHandlers)))
  2977. handler(view, event);
  2978. }, passiveHandlers[event] ? { passive: true } : undefined);
  2979. }
  2980. // On Safari, for reasons beyond my understanding, adding an input
  2981. // event handler makes an issue where the composition vanishes when
  2982. // you press enter go away.
  2983. if (safari)
  2984. view.dom.addEventListener("input", () => null);
  2985. ensureListeners(view);
  2986. }
  2987. function setSelectionOrigin(view, origin) {
  2988. view.input.lastSelectionOrigin = origin;
  2989. view.input.lastSelectionTime = Date.now();
  2990. }
  2991. function destroyInput(view) {
  2992. view.domObserver.stop();
  2993. for (let type in view.input.eventHandlers)
  2994. view.dom.removeEventListener(type, view.input.eventHandlers[type]);
  2995. clearTimeout(view.input.composingTimeout);
  2996. clearTimeout(view.input.lastIOSEnterFallbackTimeout);
  2997. }
  2998. function ensureListeners(view) {
  2999. view.someProp("handleDOMEvents", currentHandlers => {
  3000. for (let type in currentHandlers)
  3001. if (!view.input.eventHandlers[type])
  3002. view.dom.addEventListener(type, view.input.eventHandlers[type] = event => runCustomHandler(view, event));
  3003. });
  3004. }
  3005. function runCustomHandler(view, event) {
  3006. return view.someProp("handleDOMEvents", handlers => {
  3007. let handler = handlers[event.type];
  3008. return handler ? handler(view, event) || event.defaultPrevented : false;
  3009. });
  3010. }
  3011. function eventBelongsToView(view, event) {
  3012. if (!event.bubbles)
  3013. return true;
  3014. if (event.defaultPrevented)
  3015. return false;
  3016. for (let node = event.target; node != view.dom; node = node.parentNode)
  3017. if (!node || node.nodeType == 11 ||
  3018. (node.pmViewDesc && node.pmViewDesc.stopEvent(event)))
  3019. return false;
  3020. return true;
  3021. }
  3022. function dispatchEvent(view, event) {
  3023. if (!runCustomHandler(view, event) && handlers[event.type] &&
  3024. (view.editable || !(event.type in editHandlers)))
  3025. handlers[event.type](view, event);
  3026. }
  3027. editHandlers.keydown = (view, _event) => {
  3028. let event = _event;
  3029. view.input.shiftKey = event.keyCode == 16 || event.shiftKey;
  3030. if (inOrNearComposition(view, event))
  3031. return;
  3032. view.input.lastKeyCode = event.keyCode;
  3033. view.input.lastKeyCodeTime = Date.now();
  3034. // Suppress enter key events on Chrome Android, because those tend
  3035. // to be part of a confused sequence of composition events fired,
  3036. // and handling them eagerly tends to corrupt the input.
  3037. if (android && chrome && event.keyCode == 13)
  3038. return;
  3039. if (event.keyCode != 229)
  3040. view.domObserver.forceFlush();
  3041. // On iOS, if we preventDefault enter key presses, the virtual
  3042. // keyboard gets confused. So the hack here is to set a flag that
  3043. // makes the DOM change code recognize that what just happens should
  3044. // be replaced by whatever the Enter key handlers do.
  3045. if (ios && event.keyCode == 13 && !event.ctrlKey && !event.altKey && !event.metaKey) {
  3046. let now = Date.now();
  3047. view.input.lastIOSEnter = now;
  3048. view.input.lastIOSEnterFallbackTimeout = setTimeout(() => {
  3049. if (view.input.lastIOSEnter == now) {
  3050. view.someProp("handleKeyDown", f => f(view, keyEvent(13, "Enter")));
  3051. view.input.lastIOSEnter = 0;
  3052. }
  3053. }, 200);
  3054. }
  3055. else if (view.someProp("handleKeyDown", f => f(view, event)) || captureKeyDown(view, event)) {
  3056. event.preventDefault();
  3057. }
  3058. else {
  3059. setSelectionOrigin(view, "key");
  3060. }
  3061. };
  3062. editHandlers.keyup = (view, event) => {
  3063. if (event.keyCode == 16)
  3064. view.input.shiftKey = false;
  3065. };
  3066. editHandlers.keypress = (view, _event) => {
  3067. let event = _event;
  3068. if (inOrNearComposition(view, event) || !event.charCode ||
  3069. event.ctrlKey && !event.altKey || mac && event.metaKey)
  3070. return;
  3071. if (view.someProp("handleKeyPress", f => f(view, event))) {
  3072. event.preventDefault();
  3073. return;
  3074. }
  3075. let sel = view.state.selection;
  3076. if (!(sel instanceof TextSelection) || !sel.$from.sameParent(sel.$to)) {
  3077. let text = String.fromCharCode(event.charCode);
  3078. if (!/[\r\n]/.test(text) && !view.someProp("handleTextInput", f => f(view, sel.$from.pos, sel.$to.pos, text)))
  3079. view.dispatch(view.state.tr.insertText(text).scrollIntoView());
  3080. event.preventDefault();
  3081. }
  3082. };
  3083. function eventCoords(event) { return { left: event.clientX, top: event.clientY }; }
  3084. function isNear(event, click) {
  3085. let dx = click.x - event.clientX, dy = click.y - event.clientY;
  3086. return dx * dx + dy * dy < 100;
  3087. }
  3088. function runHandlerOnContext(view, propName, pos, inside, event) {
  3089. if (inside == -1)
  3090. return false;
  3091. let $pos = view.state.doc.resolve(inside);
  3092. for (let i = $pos.depth + 1; i > 0; i--) {
  3093. if (view.someProp(propName, f => i > $pos.depth ? f(view, pos, $pos.nodeAfter, $pos.before(i), event, true)
  3094. : f(view, pos, $pos.node(i), $pos.before(i), event, false)))
  3095. return true;
  3096. }
  3097. return false;
  3098. }
  3099. function updateSelection(view, selection, origin) {
  3100. if (!view.focused)
  3101. view.focus();
  3102. let tr = view.state.tr.setSelection(selection);
  3103. if (origin == "pointer")
  3104. tr.setMeta("pointer", true);
  3105. view.dispatch(tr);
  3106. }
  3107. function selectClickedLeaf(view, inside) {
  3108. if (inside == -1)
  3109. return false;
  3110. let $pos = view.state.doc.resolve(inside), node = $pos.nodeAfter;
  3111. if (node && node.isAtom && NodeSelection.isSelectable(node)) {
  3112. updateSelection(view, new NodeSelection($pos), "pointer");
  3113. return true;
  3114. }
  3115. return false;
  3116. }
  3117. function selectClickedNode(view, inside) {
  3118. if (inside == -1)
  3119. return false;
  3120. let sel = view.state.selection, selectedNode, selectAt;
  3121. if (sel instanceof NodeSelection)
  3122. selectedNode = sel.node;
  3123. let $pos = view.state.doc.resolve(inside);
  3124. for (let i = $pos.depth + 1; i > 0; i--) {
  3125. let node = i > $pos.depth ? $pos.nodeAfter : $pos.node(i);
  3126. if (NodeSelection.isSelectable(node)) {
  3127. if (selectedNode && sel.$from.depth > 0 &&
  3128. i >= sel.$from.depth && $pos.before(sel.$from.depth + 1) == sel.$from.pos)
  3129. selectAt = $pos.before(sel.$from.depth);
  3130. else
  3131. selectAt = $pos.before(i);
  3132. break;
  3133. }
  3134. }
  3135. if (selectAt != null) {
  3136. updateSelection(view, NodeSelection.create(view.state.doc, selectAt), "pointer");
  3137. return true;
  3138. }
  3139. else {
  3140. return false;
  3141. }
  3142. }
  3143. function handleSingleClick(view, pos, inside, event, selectNode) {
  3144. return runHandlerOnContext(view, "handleClickOn", pos, inside, event) ||
  3145. view.someProp("handleClick", f => f(view, pos, event)) ||
  3146. (selectNode ? selectClickedNode(view, inside) : selectClickedLeaf(view, inside));
  3147. }
  3148. function handleDoubleClick(view, pos, inside, event) {
  3149. return runHandlerOnContext(view, "handleDoubleClickOn", pos, inside, event) ||
  3150. view.someProp("handleDoubleClick", f => f(view, pos, event));
  3151. }
  3152. function handleTripleClick(view, pos, inside, event) {
  3153. return runHandlerOnContext(view, "handleTripleClickOn", pos, inside, event) ||
  3154. view.someProp("handleTripleClick", f => f(view, pos, event)) ||
  3155. defaultTripleClick(view, inside, event);
  3156. }
  3157. function defaultTripleClick(view, inside, event) {
  3158. if (event.button != 0)
  3159. return false;
  3160. let doc = view.state.doc;
  3161. if (inside == -1) {
  3162. if (doc.inlineContent) {
  3163. updateSelection(view, TextSelection.create(doc, 0, doc.content.size), "pointer");
  3164. return true;
  3165. }
  3166. return false;
  3167. }
  3168. let $pos = doc.resolve(inside);
  3169. for (let i = $pos.depth + 1; i > 0; i--) {
  3170. let node = i > $pos.depth ? $pos.nodeAfter : $pos.node(i);
  3171. let nodePos = $pos.before(i);
  3172. if (node.inlineContent)
  3173. updateSelection(view, TextSelection.create(doc, nodePos + 1, nodePos + 1 + node.content.size), "pointer");
  3174. else if (NodeSelection.isSelectable(node))
  3175. updateSelection(view, NodeSelection.create(doc, nodePos), "pointer");
  3176. else
  3177. continue;
  3178. return true;
  3179. }
  3180. }
  3181. function forceDOMFlush(view) {
  3182. return endComposition(view);
  3183. }
  3184. const selectNodeModifier = mac ? "metaKey" : "ctrlKey";
  3185. handlers.mousedown = (view, _event) => {
  3186. let event = _event;
  3187. view.input.shiftKey = event.shiftKey;
  3188. let flushed = forceDOMFlush(view);
  3189. let now = Date.now(), type = "singleClick";
  3190. if (now - view.input.lastClick.time < 500 && isNear(event, view.input.lastClick) && !event[selectNodeModifier]) {
  3191. if (view.input.lastClick.type == "singleClick")
  3192. type = "doubleClick";
  3193. else if (view.input.lastClick.type == "doubleClick")
  3194. type = "tripleClick";
  3195. }
  3196. view.input.lastClick = { time: now, x: event.clientX, y: event.clientY, type };
  3197. let pos = view.posAtCoords(eventCoords(event));
  3198. if (!pos)
  3199. return;
  3200. if (type == "singleClick") {
  3201. if (view.input.mouseDown)
  3202. view.input.mouseDown.done();
  3203. view.input.mouseDown = new MouseDown(view, pos, event, !!flushed);
  3204. }
  3205. else if ((type == "doubleClick" ? handleDoubleClick : handleTripleClick)(view, pos.pos, pos.inside, event)) {
  3206. event.preventDefault();
  3207. }
  3208. else {
  3209. setSelectionOrigin(view, "pointer");
  3210. }
  3211. };
  3212. class MouseDown {
  3213. constructor(view, pos, event, flushed) {
  3214. this.view = view;
  3215. this.pos = pos;
  3216. this.event = event;
  3217. this.flushed = flushed;
  3218. this.delayedSelectionSync = false;
  3219. this.mightDrag = null;
  3220. this.startDoc = view.state.doc;
  3221. this.selectNode = !!event[selectNodeModifier];
  3222. this.allowDefault = event.shiftKey;
  3223. let targetNode, targetPos;
  3224. if (pos.inside > -1) {
  3225. targetNode = view.state.doc.nodeAt(pos.inside);
  3226. targetPos = pos.inside;
  3227. }
  3228. else {
  3229. let $pos = view.state.doc.resolve(pos.pos);
  3230. targetNode = $pos.parent;
  3231. targetPos = $pos.depth ? $pos.before() : 0;
  3232. }
  3233. const target = flushed ? null : event.target;
  3234. const targetDesc = target ? view.docView.nearestDesc(target, true) : null;
  3235. this.target = targetDesc ? targetDesc.dom : null;
  3236. let { selection } = view.state;
  3237. if (event.button == 0 &&
  3238. targetNode.type.spec.draggable && targetNode.type.spec.selectable !== false ||
  3239. selection instanceof NodeSelection && selection.from <= targetPos && selection.to > targetPos)
  3240. this.mightDrag = {
  3241. node: targetNode,
  3242. pos: targetPos,
  3243. addAttr: !!(this.target && !this.target.draggable),
  3244. setUneditable: !!(this.target && gecko && !this.target.hasAttribute("contentEditable"))
  3245. };
  3246. if (this.target && this.mightDrag && (this.mightDrag.addAttr || this.mightDrag.setUneditable)) {
  3247. this.view.domObserver.stop();
  3248. if (this.mightDrag.addAttr)
  3249. this.target.draggable = true;
  3250. if (this.mightDrag.setUneditable)
  3251. setTimeout(() => {
  3252. if (this.view.input.mouseDown == this)
  3253. this.target.setAttribute("contentEditable", "false");
  3254. }, 20);
  3255. this.view.domObserver.start();
  3256. }
  3257. view.root.addEventListener("mouseup", this.up = this.up.bind(this));
  3258. view.root.addEventListener("mousemove", this.move = this.move.bind(this));
  3259. setSelectionOrigin(view, "pointer");
  3260. }
  3261. done() {
  3262. this.view.root.removeEventListener("mouseup", this.up);
  3263. this.view.root.removeEventListener("mousemove", this.move);
  3264. if (this.mightDrag && this.target) {
  3265. this.view.domObserver.stop();
  3266. if (this.mightDrag.addAttr)
  3267. this.target.removeAttribute("draggable");
  3268. if (this.mightDrag.setUneditable)
  3269. this.target.removeAttribute("contentEditable");
  3270. this.view.domObserver.start();
  3271. }
  3272. if (this.delayedSelectionSync)
  3273. setTimeout(() => selectionToDOM(this.view));
  3274. this.view.input.mouseDown = null;
  3275. }
  3276. up(event) {
  3277. this.done();
  3278. if (!this.view.dom.contains(event.target))
  3279. return;
  3280. let pos = this.pos;
  3281. if (this.view.state.doc != this.startDoc)
  3282. pos = this.view.posAtCoords(eventCoords(event));
  3283. this.updateAllowDefault(event);
  3284. if (this.allowDefault || !pos) {
  3285. setSelectionOrigin(this.view, "pointer");
  3286. }
  3287. else if (handleSingleClick(this.view, pos.pos, pos.inside, event, this.selectNode)) {
  3288. event.preventDefault();
  3289. }
  3290. else if (event.button == 0 &&
  3291. (this.flushed ||
  3292. // Safari ignores clicks on draggable elements
  3293. (safari && this.mightDrag && !this.mightDrag.node.isAtom) ||
  3294. // Chrome will sometimes treat a node selection as a
  3295. // cursor, but still report that the node is selected
  3296. // when asked through getSelection. You'll then get a
  3297. // situation where clicking at the point where that
  3298. // (hidden) cursor is doesn't change the selection, and
  3299. // thus doesn't get a reaction from ProseMirror. This
  3300. // works around that.
  3301. (chrome && !this.view.state.selection.visible &&
  3302. Math.min(Math.abs(pos.pos - this.view.state.selection.from), Math.abs(pos.pos - this.view.state.selection.to)) <= 2))) {
  3303. updateSelection(this.view, Selection.near(this.view.state.doc.resolve(pos.pos)), "pointer");
  3304. event.preventDefault();
  3305. }
  3306. else {
  3307. setSelectionOrigin(this.view, "pointer");
  3308. }
  3309. }
  3310. move(event) {
  3311. this.updateAllowDefault(event);
  3312. setSelectionOrigin(this.view, "pointer");
  3313. if (event.buttons == 0)
  3314. this.done();
  3315. }
  3316. updateAllowDefault(event) {
  3317. if (!this.allowDefault && (Math.abs(this.event.x - event.clientX) > 4 ||
  3318. Math.abs(this.event.y - event.clientY) > 4))
  3319. this.allowDefault = true;
  3320. }
  3321. }
  3322. handlers.touchstart = view => {
  3323. view.input.lastTouch = Date.now();
  3324. forceDOMFlush(view);
  3325. setSelectionOrigin(view, "pointer");
  3326. };
  3327. handlers.touchmove = view => {
  3328. view.input.lastTouch = Date.now();
  3329. setSelectionOrigin(view, "pointer");
  3330. };
  3331. handlers.contextmenu = view => forceDOMFlush(view);
  3332. function inOrNearComposition(view, event) {
  3333. if (view.composing)
  3334. return true;
  3335. // See https://www.stum.de/2016/06/24/handling-ime-events-in-javascript/.
  3336. // On Japanese input method editors (IMEs), the Enter key is used to confirm character
  3337. // selection. On Safari, when Enter is pressed, compositionend and keydown events are
  3338. // emitted. The keydown event triggers newline insertion, which we don't want.
  3339. // This method returns true if the keydown event should be ignored.
  3340. // We only ignore it once, as pressing Enter a second time *should* insert a newline.
  3341. // Furthermore, the keydown event timestamp must be close to the compositionEndedAt timestamp.
  3342. // This guards against the case where compositionend is triggered without the keyboard
  3343. // (e.g. character confirmation may be done with the mouse), and keydown is triggered
  3344. // afterwards- we wouldn't want to ignore the keydown event in this case.
  3345. if (safari && Math.abs(event.timeStamp - view.input.compositionEndedAt) < 500) {
  3346. view.input.compositionEndedAt = -2e8;
  3347. return true;
  3348. }
  3349. return false;
  3350. }
  3351. // Drop active composition after 5 seconds of inactivity on Android
  3352. const timeoutComposition = android ? 5000 : -1;
  3353. editHandlers.compositionstart = editHandlers.compositionupdate = view => {
  3354. if (!view.composing) {
  3355. view.domObserver.flush();
  3356. let { state } = view, $pos = state.selection.$from;
  3357. if (state.selection.empty &&
  3358. (state.storedMarks ||
  3359. (!$pos.textOffset && $pos.parentOffset && $pos.nodeBefore.marks.some(m => m.type.spec.inclusive === false)))) {
  3360. // Need to wrap the cursor in mark nodes different from the ones in the DOM context
  3361. view.markCursor = view.state.storedMarks || $pos.marks();
  3362. endComposition(view, true);
  3363. view.markCursor = null;
  3364. }
  3365. else {
  3366. endComposition(view);
  3367. // In firefox, if the cursor is after but outside a marked node,
  3368. // the inserted text won't inherit the marks. So this moves it
  3369. // inside if necessary.
  3370. if (gecko && state.selection.empty && $pos.parentOffset && !$pos.textOffset && $pos.nodeBefore.marks.length) {
  3371. let sel = view.domSelectionRange();
  3372. for (let node = sel.focusNode, offset = sel.focusOffset; node && node.nodeType == 1 && offset != 0;) {
  3373. let before = offset < 0 ? node.lastChild : node.childNodes[offset - 1];
  3374. if (!before)
  3375. break;
  3376. if (before.nodeType == 3) {
  3377. view.domSelection().collapse(before, before.nodeValue.length);
  3378. break;
  3379. }
  3380. else {
  3381. node = before;
  3382. offset = -1;
  3383. }
  3384. }
  3385. }
  3386. }
  3387. view.input.composing = true;
  3388. }
  3389. scheduleComposeEnd(view, timeoutComposition);
  3390. };
  3391. editHandlers.compositionend = (view, event) => {
  3392. if (view.composing) {
  3393. view.input.composing = false;
  3394. view.input.compositionEndedAt = event.timeStamp;
  3395. view.input.compositionPendingChanges = view.domObserver.pendingRecords().length ? view.input.compositionID : 0;
  3396. if (view.input.compositionPendingChanges)
  3397. Promise.resolve().then(() => view.domObserver.flush());
  3398. view.input.compositionID++;
  3399. scheduleComposeEnd(view, 20);
  3400. }
  3401. };
  3402. function scheduleComposeEnd(view, delay) {
  3403. clearTimeout(view.input.composingTimeout);
  3404. if (delay > -1)
  3405. view.input.composingTimeout = setTimeout(() => endComposition(view), delay);
  3406. }
  3407. function clearComposition(view) {
  3408. if (view.composing) {
  3409. view.input.composing = false;
  3410. view.input.compositionEndedAt = timestampFromCustomEvent();
  3411. }
  3412. while (view.input.compositionNodes.length > 0)
  3413. view.input.compositionNodes.pop().markParentsDirty();
  3414. }
  3415. function timestampFromCustomEvent() {
  3416. let event = document.createEvent("Event");
  3417. event.initEvent("event", true, true);
  3418. return event.timeStamp;
  3419. }
  3420. /**
  3421. @internal
  3422. */
  3423. function endComposition(view, forceUpdate = false) {
  3424. if (android && view.domObserver.flushingSoon >= 0)
  3425. return;
  3426. view.domObserver.forceFlush();
  3427. clearComposition(view);
  3428. if (forceUpdate || view.docView && view.docView.dirty) {
  3429. let sel = selectionFromDOM(view);
  3430. if (sel && !sel.eq(view.state.selection))
  3431. view.dispatch(view.state.tr.setSelection(sel));
  3432. else
  3433. view.updateState(view.state);
  3434. return true;
  3435. }
  3436. return false;
  3437. }
  3438. function captureCopy(view, dom) {
  3439. // The extra wrapper is somehow necessary on IE/Edge to prevent the
  3440. // content from being mangled when it is put onto the clipboard
  3441. if (!view.dom.parentNode)
  3442. return;
  3443. let wrap = view.dom.parentNode.appendChild(document.createElement("div"));
  3444. wrap.appendChild(dom);
  3445. wrap.style.cssText = "position: fixed; left: -10000px; top: 10px";
  3446. let sel = getSelection(), range = document.createRange();
  3447. range.selectNodeContents(dom);
  3448. // Done because IE will fire a selectionchange moving the selection
  3449. // to its start when removeAllRanges is called and the editor still
  3450. // has focus (which will mess up the editor's selection state).
  3451. view.dom.blur();
  3452. sel.removeAllRanges();
  3453. sel.addRange(range);
  3454. setTimeout(() => {
  3455. if (wrap.parentNode)
  3456. wrap.parentNode.removeChild(wrap);
  3457. view.focus();
  3458. }, 50);
  3459. }
  3460. // This is very crude, but unfortunately both these browsers _pretend_
  3461. // that they have a clipboard API—all the objects and methods are
  3462. // there, they just don't work, and they are hard to test.
  3463. const brokenClipboardAPI = (ie && ie_version < 15) ||
  3464. (ios && webkit_version < 604);
  3465. handlers.copy = editHandlers.cut = (view, _event) => {
  3466. let event = _event;
  3467. let sel = view.state.selection, cut = event.type == "cut";
  3468. if (sel.empty)
  3469. return;
  3470. // IE and Edge's clipboard interface is completely broken
  3471. let data = brokenClipboardAPI ? null : event.clipboardData;
  3472. let slice = sel.content(), { dom, text } = serializeForClipboard(view, slice);
  3473. if (data) {
  3474. event.preventDefault();
  3475. data.clearData();
  3476. data.setData("text/html", dom.innerHTML);
  3477. data.setData("text/plain", text);
  3478. }
  3479. else {
  3480. captureCopy(view, dom);
  3481. }
  3482. if (cut)
  3483. view.dispatch(view.state.tr.deleteSelection().scrollIntoView().setMeta("uiEvent", "cut"));
  3484. };
  3485. function sliceSingleNode(slice) {
  3486. return slice.openStart == 0 && slice.openEnd == 0 && slice.content.childCount == 1 ? slice.content.firstChild : null;
  3487. }
  3488. function capturePaste(view, event) {
  3489. if (!view.dom.parentNode)
  3490. return;
  3491. let plainText = view.input.shiftKey || view.state.selection.$from.parent.type.spec.code;
  3492. let target = view.dom.parentNode.appendChild(document.createElement(plainText ? "textarea" : "div"));
  3493. if (!plainText)
  3494. target.contentEditable = "true";
  3495. target.style.cssText = "position: fixed; left: -10000px; top: 10px";
  3496. target.focus();
  3497. let plain = view.input.shiftKey && view.input.lastKeyCode != 45;
  3498. setTimeout(() => {
  3499. view.focus();
  3500. if (target.parentNode)
  3501. target.parentNode.removeChild(target);
  3502. if (plainText)
  3503. doPaste(view, target.value, null, plain, event);
  3504. else
  3505. doPaste(view, target.textContent, target.innerHTML, plain, event);
  3506. }, 50);
  3507. }
  3508. function doPaste(view, text, html, preferPlain, event) {
  3509. let slice = parseFromClipboard(view, text, html, preferPlain, view.state.selection.$from);
  3510. if (view.someProp("handlePaste", f => f(view, event, slice || Slice.empty)))
  3511. return true;
  3512. if (!slice)
  3513. return false;
  3514. let singleNode = sliceSingleNode(slice);
  3515. let tr = singleNode
  3516. ? view.state.tr.replaceSelectionWith(singleNode, preferPlain)
  3517. : view.state.tr.replaceSelection(slice);
  3518. view.dispatch(tr.scrollIntoView().setMeta("paste", true).setMeta("uiEvent", "paste"));
  3519. return true;
  3520. }
  3521. function getText(clipboardData) {
  3522. let text = clipboardData.getData("text/plain") || clipboardData.getData("Text");
  3523. if (text)
  3524. return text;
  3525. let uris = clipboardData.getData("text/uri-list");
  3526. return uris ? uris.replace(/\r?\n/g, " ") : "";
  3527. }
  3528. editHandlers.paste = (view, _event) => {
  3529. let event = _event;
  3530. // Handling paste from JavaScript during composition is very poorly
  3531. // handled by browsers, so as a dodgy but preferable kludge, we just
  3532. // let the browser do its native thing there, except on Android,
  3533. // where the editor is almost always composing.
  3534. if (view.composing && !android)
  3535. return;
  3536. let data = brokenClipboardAPI ? null : event.clipboardData;
  3537. let plain = view.input.shiftKey && view.input.lastKeyCode != 45;
  3538. if (data && doPaste(view, getText(data), data.getData("text/html"), plain, event))
  3539. event.preventDefault();
  3540. else
  3541. capturePaste(view, event);
  3542. };
  3543. class Dragging {
  3544. constructor(slice, move, node) {
  3545. this.slice = slice;
  3546. this.move = move;
  3547. this.node = node;
  3548. }
  3549. }
  3550. const dragCopyModifier = mac ? "altKey" : "ctrlKey";
  3551. handlers.dragstart = (view, _event) => {
  3552. let event = _event;
  3553. let mouseDown = view.input.mouseDown;
  3554. if (mouseDown)
  3555. mouseDown.done();
  3556. if (!event.dataTransfer)
  3557. return;
  3558. let sel = view.state.selection;
  3559. let pos = sel.empty ? null : view.posAtCoords(eventCoords(event));
  3560. let node;
  3561. if (pos && pos.pos >= sel.from && pos.pos <= (sel instanceof NodeSelection ? sel.to - 1 : sel.to)) ;
  3562. else if (mouseDown && mouseDown.mightDrag) {
  3563. node = NodeSelection.create(view.state.doc, mouseDown.mightDrag.pos);
  3564. }
  3565. else if (event.target && event.target.nodeType == 1) {
  3566. let desc = view.docView.nearestDesc(event.target, true);
  3567. if (desc && desc.node.type.spec.draggable && desc != view.docView)
  3568. node = NodeSelection.create(view.state.doc, desc.posBefore);
  3569. }
  3570. let slice = (node || view.state.selection).content(), { dom, text } = serializeForClipboard(view, slice);
  3571. event.dataTransfer.clearData();
  3572. event.dataTransfer.setData(brokenClipboardAPI ? "Text" : "text/html", dom.innerHTML);
  3573. // See https://github.com/ProseMirror/prosemirror/issues/1156
  3574. event.dataTransfer.effectAllowed = "copyMove";
  3575. if (!brokenClipboardAPI)
  3576. event.dataTransfer.setData("text/plain", text);
  3577. view.dragging = new Dragging(slice, !event[dragCopyModifier], node);
  3578. };
  3579. handlers.dragend = view => {
  3580. let dragging = view.dragging;
  3581. window.setTimeout(() => {
  3582. if (view.dragging == dragging)
  3583. view.dragging = null;
  3584. }, 50);
  3585. };
  3586. editHandlers.dragover = editHandlers.dragenter = (_, e) => e.preventDefault();
  3587. editHandlers.drop = (view, _event) => {
  3588. let event = _event;
  3589. let dragging = view.dragging;
  3590. view.dragging = null;
  3591. if (!event.dataTransfer)
  3592. return;
  3593. let eventPos = view.posAtCoords(eventCoords(event));
  3594. if (!eventPos)
  3595. return;
  3596. let $mouse = view.state.doc.resolve(eventPos.pos);
  3597. let slice = dragging && dragging.slice;
  3598. if (slice) {
  3599. view.someProp("transformPasted", f => { slice = f(slice, view); });
  3600. }
  3601. else {
  3602. slice = parseFromClipboard(view, getText(event.dataTransfer), brokenClipboardAPI ? null : event.dataTransfer.getData("text/html"), false, $mouse);
  3603. }
  3604. let move = !!(dragging && !event[dragCopyModifier]);
  3605. if (view.someProp("handleDrop", f => f(view, event, slice || Slice.empty, move))) {
  3606. event.preventDefault();
  3607. return;
  3608. }
  3609. if (!slice)
  3610. return;
  3611. event.preventDefault();
  3612. let insertPos = slice ? dropPoint(view.state.doc, $mouse.pos, slice) : $mouse.pos;
  3613. if (insertPos == null)
  3614. insertPos = $mouse.pos;
  3615. let tr = view.state.tr;
  3616. if (move) {
  3617. let { node } = dragging;
  3618. if (node)
  3619. node.replace(tr);
  3620. else
  3621. tr.deleteSelection();
  3622. }
  3623. let pos = tr.mapping.map(insertPos);
  3624. let isNode = slice.openStart == 0 && slice.openEnd == 0 && slice.content.childCount == 1;
  3625. let beforeInsert = tr.doc;
  3626. if (isNode)
  3627. tr.replaceRangeWith(pos, pos, slice.content.firstChild);
  3628. else
  3629. tr.replaceRange(pos, pos, slice);
  3630. if (tr.doc.eq(beforeInsert))
  3631. return;
  3632. let $pos = tr.doc.resolve(pos);
  3633. if (isNode && NodeSelection.isSelectable(slice.content.firstChild) &&
  3634. $pos.nodeAfter && $pos.nodeAfter.sameMarkup(slice.content.firstChild)) {
  3635. tr.setSelection(new NodeSelection($pos));
  3636. }
  3637. else {
  3638. let end = tr.mapping.map(insertPos);
  3639. tr.mapping.maps[tr.mapping.maps.length - 1].forEach((_from, _to, _newFrom, newTo) => end = newTo);
  3640. tr.setSelection(selectionBetween(view, $pos, tr.doc.resolve(end)));
  3641. }
  3642. view.focus();
  3643. view.dispatch(tr.setMeta("uiEvent", "drop"));
  3644. };
  3645. handlers.focus = view => {
  3646. view.input.lastFocus = Date.now();
  3647. if (!view.focused) {
  3648. view.domObserver.stop();
  3649. view.dom.classList.add("ProseMirror-focused");
  3650. view.domObserver.start();
  3651. view.focused = true;
  3652. setTimeout(() => {
  3653. if (view.docView && view.hasFocus() && !view.domObserver.currentSelection.eq(view.domSelectionRange()))
  3654. selectionToDOM(view);
  3655. }, 20);
  3656. }
  3657. };
  3658. handlers.blur = (view, _event) => {
  3659. let event = _event;
  3660. if (view.focused) {
  3661. view.domObserver.stop();
  3662. view.dom.classList.remove("ProseMirror-focused");
  3663. view.domObserver.start();
  3664. if (event.relatedTarget && view.dom.contains(event.relatedTarget))
  3665. view.domObserver.currentSelection.clear();
  3666. view.focused = false;
  3667. }
  3668. };
  3669. handlers.beforeinput = (view, _event) => {
  3670. let event = _event;
  3671. // We should probably do more with beforeinput events, but support
  3672. // is so spotty that I'm still waiting to see where they are going.
  3673. // Very specific hack to deal with backspace sometimes failing on
  3674. // Chrome Android when after an uneditable node.
  3675. if (chrome && android && event.inputType == "deleteContentBackward") {
  3676. view.domObserver.flushSoon();
  3677. let { domChangeCount } = view.input;
  3678. setTimeout(() => {
  3679. if (view.input.domChangeCount != domChangeCount)
  3680. return; // Event already had some effect
  3681. // This bug tends to close the virtual keyboard, so we refocus
  3682. view.dom.blur();
  3683. view.focus();
  3684. if (view.someProp("handleKeyDown", f => f(view, keyEvent(8, "Backspace"))))
  3685. return;
  3686. let { $cursor } = view.state.selection;
  3687. // Crude approximation of backspace behavior when no command handled it
  3688. if ($cursor && $cursor.pos > 0)
  3689. view.dispatch(view.state.tr.delete($cursor.pos - 1, $cursor.pos).scrollIntoView());
  3690. }, 50);
  3691. }
  3692. };
  3693. // Make sure all handlers get registered
  3694. for (let prop in editHandlers)
  3695. handlers[prop] = editHandlers[prop];
  3696. function compareObjs(a, b) {
  3697. if (a == b)
  3698. return true;
  3699. for (let p in a)
  3700. if (a[p] !== b[p])
  3701. return false;
  3702. for (let p in b)
  3703. if (!(p in a))
  3704. return false;
  3705. return true;
  3706. }
  3707. class WidgetType {
  3708. constructor(toDOM, spec) {
  3709. this.toDOM = toDOM;
  3710. this.spec = spec || noSpec;
  3711. this.side = this.spec.side || 0;
  3712. }
  3713. map(mapping, span, offset, oldOffset) {
  3714. let { pos, deleted } = mapping.mapResult(span.from + oldOffset, this.side < 0 ? -1 : 1);
  3715. return deleted ? null : new Decoration(pos - offset, pos - offset, this);
  3716. }
  3717. valid() { return true; }
  3718. eq(other) {
  3719. return this == other ||
  3720. (other instanceof WidgetType &&
  3721. (this.spec.key && this.spec.key == other.spec.key ||
  3722. this.toDOM == other.toDOM && compareObjs(this.spec, other.spec)));
  3723. }
  3724. destroy(node) {
  3725. if (this.spec.destroy)
  3726. this.spec.destroy(node);
  3727. }
  3728. }
  3729. class InlineType {
  3730. constructor(attrs, spec) {
  3731. this.attrs = attrs;
  3732. this.spec = spec || noSpec;
  3733. }
  3734. map(mapping, span, offset, oldOffset) {
  3735. let from = mapping.map(span.from + oldOffset, this.spec.inclusiveStart ? -1 : 1) - offset;
  3736. let to = mapping.map(span.to + oldOffset, this.spec.inclusiveEnd ? 1 : -1) - offset;
  3737. return from >= to ? null : new Decoration(from, to, this);
  3738. }
  3739. valid(_, span) { return span.from < span.to; }
  3740. eq(other) {
  3741. return this == other ||
  3742. (other instanceof InlineType && compareObjs(this.attrs, other.attrs) &&
  3743. compareObjs(this.spec, other.spec));
  3744. }
  3745. static is(span) { return span.type instanceof InlineType; }
  3746. destroy() { }
  3747. }
  3748. class NodeType {
  3749. constructor(attrs, spec) {
  3750. this.attrs = attrs;
  3751. this.spec = spec || noSpec;
  3752. }
  3753. map(mapping, span, offset, oldOffset) {
  3754. let from = mapping.mapResult(span.from + oldOffset, 1);
  3755. if (from.deleted)
  3756. return null;
  3757. let to = mapping.mapResult(span.to + oldOffset, -1);
  3758. if (to.deleted || to.pos <= from.pos)
  3759. return null;
  3760. return new Decoration(from.pos - offset, to.pos - offset, this);
  3761. }
  3762. valid(node, span) {
  3763. let { index, offset } = node.content.findIndex(span.from), child;
  3764. return offset == span.from && !(child = node.child(index)).isText && offset + child.nodeSize == span.to;
  3765. }
  3766. eq(other) {
  3767. return this == other ||
  3768. (other instanceof NodeType && compareObjs(this.attrs, other.attrs) &&
  3769. compareObjs(this.spec, other.spec));
  3770. }
  3771. destroy() { }
  3772. }
  3773. /**
  3774. Decoration objects can be provided to the view through the
  3775. [`decorations` prop](https://prosemirror.net/docs/ref/#view.EditorProps.decorations). They come in
  3776. several variants—see the static members of this class for details.
  3777. */
  3778. class Decoration {
  3779. /**
  3780. @internal
  3781. */
  3782. constructor(
  3783. /**
  3784. The start position of the decoration.
  3785. */
  3786. from,
  3787. /**
  3788. The end position. Will be the same as `from` for [widget
  3789. decorations](https://prosemirror.net/docs/ref/#view.Decoration^widget).
  3790. */
  3791. to,
  3792. /**
  3793. @internal
  3794. */
  3795. type) {
  3796. this.from = from;
  3797. this.to = to;
  3798. this.type = type;
  3799. }
  3800. /**
  3801. @internal
  3802. */
  3803. copy(from, to) {
  3804. return new Decoration(from, to, this.type);
  3805. }
  3806. /**
  3807. @internal
  3808. */
  3809. eq(other, offset = 0) {
  3810. return this.type.eq(other.type) && this.from + offset == other.from && this.to + offset == other.to;
  3811. }
  3812. /**
  3813. @internal
  3814. */
  3815. map(mapping, offset, oldOffset) {
  3816. return this.type.map(mapping, this, offset, oldOffset);
  3817. }
  3818. /**
  3819. Creates a widget decoration, which is a DOM node that's shown in
  3820. the document at the given position. It is recommended that you
  3821. delay rendering the widget by passing a function that will be
  3822. called when the widget is actually drawn in a view, but you can
  3823. also directly pass a DOM node. `getPos` can be used to find the
  3824. widget's current document position.
  3825. */
  3826. static widget(pos, toDOM, spec) {
  3827. return new Decoration(pos, pos, new WidgetType(toDOM, spec));
  3828. }
  3829. /**
  3830. Creates an inline decoration, which adds the given attributes to
  3831. each inline node between `from` and `to`.
  3832. */
  3833. static inline(from, to, attrs, spec) {
  3834. return new Decoration(from, to, new InlineType(attrs, spec));
  3835. }
  3836. /**
  3837. Creates a node decoration. `from` and `to` should point precisely
  3838. before and after a node in the document. That node, and only that
  3839. node, will receive the given attributes.
  3840. */
  3841. static node(from, to, attrs, spec) {
  3842. return new Decoration(from, to, new NodeType(attrs, spec));
  3843. }
  3844. /**
  3845. The spec provided when creating this decoration. Can be useful
  3846. if you've stored extra information in that object.
  3847. */
  3848. get spec() { return this.type.spec; }
  3849. /**
  3850. @internal
  3851. */
  3852. get inline() { return this.type instanceof InlineType; }
  3853. /**
  3854. @internal
  3855. */
  3856. get widget() { return this.type instanceof WidgetType; }
  3857. }
  3858. const none = [], noSpec = {};
  3859. /**
  3860. A collection of [decorations](https://prosemirror.net/docs/ref/#view.Decoration), organized in such
  3861. a way that the drawing algorithm can efficiently use and compare
  3862. them. This is a persistent data structure—it is not modified,
  3863. updates create a new value.
  3864. */
  3865. class DecorationSet {
  3866. /**
  3867. @internal
  3868. */
  3869. constructor(local, children) {
  3870. this.local = local.length ? local : none;
  3871. this.children = children.length ? children : none;
  3872. }
  3873. /**
  3874. Create a set of decorations, using the structure of the given
  3875. document. This will consume (modify) the `decorations` array, so
  3876. you must make a copy if you want need to preserve that.
  3877. */
  3878. static create(doc, decorations) {
  3879. return decorations.length ? buildTree(decorations, doc, 0, noSpec) : empty;
  3880. }
  3881. /**
  3882. Find all decorations in this set which touch the given range
  3883. (including decorations that start or end directly at the
  3884. boundaries) and match the given predicate on their spec. When
  3885. `start` and `end` are omitted, all decorations in the set are
  3886. considered. When `predicate` isn't given, all decorations are
  3887. assumed to match.
  3888. */
  3889. find(start, end, predicate) {
  3890. let result = [];
  3891. this.findInner(start == null ? 0 : start, end == null ? 1e9 : end, result, 0, predicate);
  3892. return result;
  3893. }
  3894. findInner(start, end, result, offset, predicate) {
  3895. for (let i = 0; i < this.local.length; i++) {
  3896. let span = this.local[i];
  3897. if (span.from <= end && span.to >= start && (!predicate || predicate(span.spec)))
  3898. result.push(span.copy(span.from + offset, span.to + offset));
  3899. }
  3900. for (let i = 0; i < this.children.length; i += 3) {
  3901. if (this.children[i] < end && this.children[i + 1] > start) {
  3902. let childOff = this.children[i] + 1;
  3903. this.children[i + 2].findInner(start - childOff, end - childOff, result, offset + childOff, predicate);
  3904. }
  3905. }
  3906. }
  3907. /**
  3908. Map the set of decorations in response to a change in the
  3909. document.
  3910. */
  3911. map(mapping, doc, options) {
  3912. if (this == empty || mapping.maps.length == 0)
  3913. return this;
  3914. return this.mapInner(mapping, doc, 0, 0, options || noSpec);
  3915. }
  3916. /**
  3917. @internal
  3918. */
  3919. mapInner(mapping, node, offset, oldOffset, options) {
  3920. let newLocal;
  3921. for (let i = 0; i < this.local.length; i++) {
  3922. let mapped = this.local[i].map(mapping, offset, oldOffset);
  3923. if (mapped && mapped.type.valid(node, mapped))
  3924. (newLocal || (newLocal = [])).push(mapped);
  3925. else if (options.onRemove)
  3926. options.onRemove(this.local[i].spec);
  3927. }
  3928. if (this.children.length)
  3929. return mapChildren(this.children, newLocal || [], mapping, node, offset, oldOffset, options);
  3930. else
  3931. return newLocal ? new DecorationSet(newLocal.sort(byPos), none) : empty;
  3932. }
  3933. /**
  3934. Add the given array of decorations to the ones in the set,
  3935. producing a new set. Consumes the `decorations` array. Needs
  3936. access to the current document to create the appropriate tree
  3937. structure.
  3938. */
  3939. add(doc, decorations) {
  3940. if (!decorations.length)
  3941. return this;
  3942. if (this == empty)
  3943. return DecorationSet.create(doc, decorations);
  3944. return this.addInner(doc, decorations, 0);
  3945. }
  3946. addInner(doc, decorations, offset) {
  3947. let children, childIndex = 0;
  3948. doc.forEach((childNode, childOffset) => {
  3949. let baseOffset = childOffset + offset, found;
  3950. if (!(found = takeSpansForNode(decorations, childNode, baseOffset)))
  3951. return;
  3952. if (!children)
  3953. children = this.children.slice();
  3954. while (childIndex < children.length && children[childIndex] < childOffset)
  3955. childIndex += 3;
  3956. if (children[childIndex] == childOffset)
  3957. children[childIndex + 2] = children[childIndex + 2].addInner(childNode, found, baseOffset + 1);
  3958. else
  3959. children.splice(childIndex, 0, childOffset, childOffset + childNode.nodeSize, buildTree(found, childNode, baseOffset + 1, noSpec));
  3960. childIndex += 3;
  3961. });
  3962. let local = moveSpans(childIndex ? withoutNulls(decorations) : decorations, -offset);
  3963. for (let i = 0; i < local.length; i++)
  3964. if (!local[i].type.valid(doc, local[i]))
  3965. local.splice(i--, 1);
  3966. return new DecorationSet(local.length ? this.local.concat(local).sort(byPos) : this.local, children || this.children);
  3967. }
  3968. /**
  3969. Create a new set that contains the decorations in this set, minus
  3970. the ones in the given array.
  3971. */
  3972. remove(decorations) {
  3973. if (decorations.length == 0 || this == empty)
  3974. return this;
  3975. return this.removeInner(decorations, 0);
  3976. }
  3977. removeInner(decorations, offset) {
  3978. let children = this.children, local = this.local;
  3979. for (let i = 0; i < children.length; i += 3) {
  3980. let found;
  3981. let from = children[i] + offset, to = children[i + 1] + offset;
  3982. for (let j = 0, span; j < decorations.length; j++)
  3983. if (span = decorations[j]) {
  3984. if (span.from > from && span.to < to) {
  3985. decorations[j] = null;
  3986. (found || (found = [])).push(span);
  3987. }
  3988. }
  3989. if (!found)
  3990. continue;
  3991. if (children == this.children)
  3992. children = this.children.slice();
  3993. let removed = children[i + 2].removeInner(found, from + 1);
  3994. if (removed != empty) {
  3995. children[i + 2] = removed;
  3996. }
  3997. else {
  3998. children.splice(i, 3);
  3999. i -= 3;
  4000. }
  4001. }
  4002. if (local.length)
  4003. for (let i = 0, span; i < decorations.length; i++)
  4004. if (span = decorations[i]) {
  4005. for (let j = 0; j < local.length; j++)
  4006. if (local[j].eq(span, offset)) {
  4007. if (local == this.local)
  4008. local = this.local.slice();
  4009. local.splice(j--, 1);
  4010. }
  4011. }
  4012. if (children == this.children && local == this.local)
  4013. return this;
  4014. return local.length || children.length ? new DecorationSet(local, children) : empty;
  4015. }
  4016. forChild(offset, node) {
  4017. if (this == empty)
  4018. return this;
  4019. if (node.isLeaf)
  4020. return DecorationSet.empty;
  4021. let child, local;
  4022. for (let i = 0; i < this.children.length; i += 3)
  4023. if (this.children[i] >= offset) {
  4024. if (this.children[i] == offset)
  4025. child = this.children[i + 2];
  4026. break;
  4027. }
  4028. let start = offset + 1, end = start + node.content.size;
  4029. for (let i = 0; i < this.local.length; i++) {
  4030. let dec = this.local[i];
  4031. if (dec.from < end && dec.to > start && (dec.type instanceof InlineType)) {
  4032. let from = Math.max(start, dec.from) - start, to = Math.min(end, dec.to) - start;
  4033. if (from < to)
  4034. (local || (local = [])).push(dec.copy(from, to));
  4035. }
  4036. }
  4037. if (local) {
  4038. let localSet = new DecorationSet(local.sort(byPos), none);
  4039. return child ? new DecorationGroup([localSet, child]) : localSet;
  4040. }
  4041. return child || empty;
  4042. }
  4043. /**
  4044. @internal
  4045. */
  4046. eq(other) {
  4047. if (this == other)
  4048. return true;
  4049. if (!(other instanceof DecorationSet) ||
  4050. this.local.length != other.local.length ||
  4051. this.children.length != other.children.length)
  4052. return false;
  4053. for (let i = 0; i < this.local.length; i++)
  4054. if (!this.local[i].eq(other.local[i]))
  4055. return false;
  4056. for (let i = 0; i < this.children.length; i += 3)
  4057. if (this.children[i] != other.children[i] ||
  4058. this.children[i + 1] != other.children[i + 1] ||
  4059. !this.children[i + 2].eq(other.children[i + 2]))
  4060. return false;
  4061. return true;
  4062. }
  4063. /**
  4064. @internal
  4065. */
  4066. locals(node) {
  4067. return removeOverlap(this.localsInner(node));
  4068. }
  4069. /**
  4070. @internal
  4071. */
  4072. localsInner(node) {
  4073. if (this == empty)
  4074. return none;
  4075. if (node.inlineContent || !this.local.some(InlineType.is))
  4076. return this.local;
  4077. let result = [];
  4078. for (let i = 0; i < this.local.length; i++) {
  4079. if (!(this.local[i].type instanceof InlineType))
  4080. result.push(this.local[i]);
  4081. }
  4082. return result;
  4083. }
  4084. }
  4085. /**
  4086. The empty set of decorations.
  4087. */
  4088. DecorationSet.empty = new DecorationSet([], []);
  4089. /**
  4090. @internal
  4091. */
  4092. DecorationSet.removeOverlap = removeOverlap;
  4093. const empty = DecorationSet.empty;
  4094. // An abstraction that allows the code dealing with decorations to
  4095. // treat multiple DecorationSet objects as if it were a single object
  4096. // with (a subset of) the same interface.
  4097. class DecorationGroup {
  4098. constructor(members) {
  4099. this.members = members;
  4100. }
  4101. map(mapping, doc) {
  4102. const mappedDecos = this.members.map(member => member.map(mapping, doc, noSpec));
  4103. return DecorationGroup.from(mappedDecos);
  4104. }
  4105. forChild(offset, child) {
  4106. if (child.isLeaf)
  4107. return DecorationSet.empty;
  4108. let found = [];
  4109. for (let i = 0; i < this.members.length; i++) {
  4110. let result = this.members[i].forChild(offset, child);
  4111. if (result == empty)
  4112. continue;
  4113. if (result instanceof DecorationGroup)
  4114. found = found.concat(result.members);
  4115. else
  4116. found.push(result);
  4117. }
  4118. return DecorationGroup.from(found);
  4119. }
  4120. eq(other) {
  4121. if (!(other instanceof DecorationGroup) ||
  4122. other.members.length != this.members.length)
  4123. return false;
  4124. for (let i = 0; i < this.members.length; i++)
  4125. if (!this.members[i].eq(other.members[i]))
  4126. return false;
  4127. return true;
  4128. }
  4129. locals(node) {
  4130. let result, sorted = true;
  4131. for (let i = 0; i < this.members.length; i++) {
  4132. let locals = this.members[i].localsInner(node);
  4133. if (!locals.length)
  4134. continue;
  4135. if (!result) {
  4136. result = locals;
  4137. }
  4138. else {
  4139. if (sorted) {
  4140. result = result.slice();
  4141. sorted = false;
  4142. }
  4143. for (let j = 0; j < locals.length; j++)
  4144. result.push(locals[j]);
  4145. }
  4146. }
  4147. return result ? removeOverlap(sorted ? result : result.sort(byPos)) : none;
  4148. }
  4149. // Create a group for the given array of decoration sets, or return
  4150. // a single set when possible.
  4151. static from(members) {
  4152. switch (members.length) {
  4153. case 0: return empty;
  4154. case 1: return members[0];
  4155. default: return new DecorationGroup(members.every(m => m instanceof DecorationSet) ? members :
  4156. members.reduce((r, m) => r.concat(m instanceof DecorationSet ? m : m.members), []));
  4157. }
  4158. }
  4159. }
  4160. function mapChildren(oldChildren, newLocal, mapping, node, offset, oldOffset, options) {
  4161. let children = oldChildren.slice();
  4162. // Mark the children that are directly touched by changes, and
  4163. // move those that are after the changes.
  4164. for (let i = 0, baseOffset = oldOffset; i < mapping.maps.length; i++) {
  4165. let moved = 0;
  4166. mapping.maps[i].forEach((oldStart, oldEnd, newStart, newEnd) => {
  4167. let dSize = (newEnd - newStart) - (oldEnd - oldStart);
  4168. for (let i = 0; i < children.length; i += 3) {
  4169. let end = children[i + 1];
  4170. if (end < 0 || oldStart > end + baseOffset - moved)
  4171. continue;
  4172. let start = children[i] + baseOffset - moved;
  4173. if (oldEnd >= start) {
  4174. children[i + 1] = oldStart <= start ? -2 : -1;
  4175. }
  4176. else if (oldStart >= baseOffset && dSize) {
  4177. children[i] += dSize;
  4178. children[i + 1] += dSize;
  4179. }
  4180. }
  4181. moved += dSize;
  4182. });
  4183. baseOffset = mapping.maps[i].map(baseOffset, -1);
  4184. }
  4185. // Find the child nodes that still correspond to a single node,
  4186. // recursively call mapInner on them and update their positions.
  4187. let mustRebuild = false;
  4188. for (let i = 0; i < children.length; i += 3)
  4189. if (children[i + 1] < 0) { // Touched nodes
  4190. if (children[i + 1] == -2) {
  4191. mustRebuild = true;
  4192. children[i + 1] = -1;
  4193. continue;
  4194. }
  4195. let from = mapping.map(oldChildren[i] + oldOffset), fromLocal = from - offset;
  4196. if (fromLocal < 0 || fromLocal >= node.content.size) {
  4197. mustRebuild = true;
  4198. continue;
  4199. }
  4200. // Must read oldChildren because children was tagged with -1
  4201. let to = mapping.map(oldChildren[i + 1] + oldOffset, -1), toLocal = to - offset;
  4202. let { index, offset: childOffset } = node.content.findIndex(fromLocal);
  4203. let childNode = node.maybeChild(index);
  4204. if (childNode && childOffset == fromLocal && childOffset + childNode.nodeSize == toLocal) {
  4205. let mapped = children[i + 2]
  4206. .mapInner(mapping, childNode, from + 1, oldChildren[i] + oldOffset + 1, options);
  4207. if (mapped != empty) {
  4208. children[i] = fromLocal;
  4209. children[i + 1] = toLocal;
  4210. children[i + 2] = mapped;
  4211. }
  4212. else {
  4213. children[i + 1] = -2;
  4214. mustRebuild = true;
  4215. }
  4216. }
  4217. else {
  4218. mustRebuild = true;
  4219. }
  4220. }
  4221. // Remaining children must be collected and rebuilt into the appropriate structure
  4222. if (mustRebuild) {
  4223. let decorations = mapAndGatherRemainingDecorations(children, oldChildren, newLocal, mapping, offset, oldOffset, options);
  4224. let built = buildTree(decorations, node, 0, options);
  4225. newLocal = built.local;
  4226. for (let i = 0; i < children.length; i += 3)
  4227. if (children[i + 1] < 0) {
  4228. children.splice(i, 3);
  4229. i -= 3;
  4230. }
  4231. for (let i = 0, j = 0; i < built.children.length; i += 3) {
  4232. let from = built.children[i];
  4233. while (j < children.length && children[j] < from)
  4234. j += 3;
  4235. children.splice(j, 0, built.children[i], built.children[i + 1], built.children[i + 2]);
  4236. }
  4237. }
  4238. return new DecorationSet(newLocal.sort(byPos), children);
  4239. }
  4240. function moveSpans(spans, offset) {
  4241. if (!offset || !spans.length)
  4242. return spans;
  4243. let result = [];
  4244. for (let i = 0; i < spans.length; i++) {
  4245. let span = spans[i];
  4246. result.push(new Decoration(span.from + offset, span.to + offset, span.type));
  4247. }
  4248. return result;
  4249. }
  4250. function mapAndGatherRemainingDecorations(children, oldChildren, decorations, mapping, offset, oldOffset, options) {
  4251. // Gather all decorations from the remaining marked children
  4252. function gather(set, oldOffset) {
  4253. for (let i = 0; i < set.local.length; i++) {
  4254. let mapped = set.local[i].map(mapping, offset, oldOffset);
  4255. if (mapped)
  4256. decorations.push(mapped);
  4257. else if (options.onRemove)
  4258. options.onRemove(set.local[i].spec);
  4259. }
  4260. for (let i = 0; i < set.children.length; i += 3)
  4261. gather(set.children[i + 2], set.children[i] + oldOffset + 1);
  4262. }
  4263. for (let i = 0; i < children.length; i += 3)
  4264. if (children[i + 1] == -1)
  4265. gather(children[i + 2], oldChildren[i] + oldOffset + 1);
  4266. return decorations;
  4267. }
  4268. function takeSpansForNode(spans, node, offset) {
  4269. if (node.isLeaf)
  4270. return null;
  4271. let end = offset + node.nodeSize, found = null;
  4272. for (let i = 0, span; i < spans.length; i++) {
  4273. if ((span = spans[i]) && span.from > offset && span.to < end) {
  4274. (found || (found = [])).push(span);
  4275. spans[i] = null;
  4276. }
  4277. }
  4278. return found;
  4279. }
  4280. function withoutNulls(array) {
  4281. let result = [];
  4282. for (let i = 0; i < array.length; i++)
  4283. if (array[i] != null)
  4284. result.push(array[i]);
  4285. return result;
  4286. }
  4287. // Build up a tree that corresponds to a set of decorations. `offset`
  4288. // is a base offset that should be subtracted from the `from` and `to`
  4289. // positions in the spans (so that we don't have to allocate new spans
  4290. // for recursive calls).
  4291. function buildTree(spans, node, offset, options) {
  4292. let children = [], hasNulls = false;
  4293. node.forEach((childNode, localStart) => {
  4294. let found = takeSpansForNode(spans, childNode, localStart + offset);
  4295. if (found) {
  4296. hasNulls = true;
  4297. let subtree = buildTree(found, childNode, offset + localStart + 1, options);
  4298. if (subtree != empty)
  4299. children.push(localStart, localStart + childNode.nodeSize, subtree);
  4300. }
  4301. });
  4302. let locals = moveSpans(hasNulls ? withoutNulls(spans) : spans, -offset).sort(byPos);
  4303. for (let i = 0; i < locals.length; i++)
  4304. if (!locals[i].type.valid(node, locals[i])) {
  4305. if (options.onRemove)
  4306. options.onRemove(locals[i].spec);
  4307. locals.splice(i--, 1);
  4308. }
  4309. return locals.length || children.length ? new DecorationSet(locals, children) : empty;
  4310. }
  4311. // Used to sort decorations so that ones with a low start position
  4312. // come first, and within a set with the same start position, those
  4313. // with an smaller end position come first.
  4314. function byPos(a, b) {
  4315. return a.from - b.from || a.to - b.to;
  4316. }
  4317. // Scan a sorted array of decorations for partially overlapping spans,
  4318. // and split those so that only fully overlapping spans are left (to
  4319. // make subsequent rendering easier). Will return the input array if
  4320. // no partially overlapping spans are found (the common case).
  4321. function removeOverlap(spans) {
  4322. let working = spans;
  4323. for (let i = 0; i < working.length - 1; i++) {
  4324. let span = working[i];
  4325. if (span.from != span.to)
  4326. for (let j = i + 1; j < working.length; j++) {
  4327. let next = working[j];
  4328. if (next.from == span.from) {
  4329. if (next.to != span.to) {
  4330. if (working == spans)
  4331. working = spans.slice();
  4332. // Followed by a partially overlapping larger span. Split that
  4333. // span.
  4334. working[j] = next.copy(next.from, span.to);
  4335. insertAhead(working, j + 1, next.copy(span.to, next.to));
  4336. }
  4337. continue;
  4338. }
  4339. else {
  4340. if (next.from < span.to) {
  4341. if (working == spans)
  4342. working = spans.slice();
  4343. // The end of this one overlaps with a subsequent span. Split
  4344. // this one.
  4345. working[i] = span.copy(span.from, next.from);
  4346. insertAhead(working, j, span.copy(next.from, span.to));
  4347. }
  4348. break;
  4349. }
  4350. }
  4351. }
  4352. return working;
  4353. }
  4354. function insertAhead(array, i, deco) {
  4355. while (i < array.length && byPos(deco, array[i]) > 0)
  4356. i++;
  4357. array.splice(i, 0, deco);
  4358. }
  4359. // Get the decorations associated with the current props of a view.
  4360. function viewDecorations(view) {
  4361. let found = [];
  4362. view.someProp("decorations", f => {
  4363. let result = f(view.state);
  4364. if (result && result != empty)
  4365. found.push(result);
  4366. });
  4367. if (view.cursorWrapper)
  4368. found.push(DecorationSet.create(view.state.doc, [view.cursorWrapper.deco]));
  4369. return DecorationGroup.from(found);
  4370. }
  4371. const observeOptions = {
  4372. childList: true,
  4373. characterData: true,
  4374. characterDataOldValue: true,
  4375. attributes: true,
  4376. attributeOldValue: true,
  4377. subtree: true
  4378. };
  4379. // IE11 has very broken mutation observers, so we also listen to DOMCharacterDataModified
  4380. const useCharData = ie && ie_version <= 11;
  4381. class SelectionState {
  4382. constructor() {
  4383. this.anchorNode = null;
  4384. this.anchorOffset = 0;
  4385. this.focusNode = null;
  4386. this.focusOffset = 0;
  4387. }
  4388. set(sel) {
  4389. this.anchorNode = sel.anchorNode;
  4390. this.anchorOffset = sel.anchorOffset;
  4391. this.focusNode = sel.focusNode;
  4392. this.focusOffset = sel.focusOffset;
  4393. }
  4394. clear() {
  4395. this.anchorNode = this.focusNode = null;
  4396. }
  4397. eq(sel) {
  4398. return sel.anchorNode == this.anchorNode && sel.anchorOffset == this.anchorOffset &&
  4399. sel.focusNode == this.focusNode && sel.focusOffset == this.focusOffset;
  4400. }
  4401. }
  4402. class DOMObserver {
  4403. constructor(view, handleDOMChange) {
  4404. this.view = view;
  4405. this.handleDOMChange = handleDOMChange;
  4406. this.queue = [];
  4407. this.flushingSoon = -1;
  4408. this.observer = null;
  4409. this.currentSelection = new SelectionState;
  4410. this.onCharData = null;
  4411. this.suppressingSelectionUpdates = false;
  4412. this.observer = window.MutationObserver &&
  4413. new window.MutationObserver(mutations => {
  4414. for (let i = 0; i < mutations.length; i++)
  4415. this.queue.push(mutations[i]);
  4416. // IE11 will sometimes (on backspacing out a single character
  4417. // text node after a BR node) call the observer callback
  4418. // before actually updating the DOM, which will cause
  4419. // ProseMirror to miss the change (see #930)
  4420. if (ie && ie_version <= 11 && mutations.some(m => m.type == "childList" && m.removedNodes.length ||
  4421. m.type == "characterData" && m.oldValue.length > m.target.nodeValue.length))
  4422. this.flushSoon();
  4423. else
  4424. this.flush();
  4425. });
  4426. if (useCharData) {
  4427. this.onCharData = e => {
  4428. this.queue.push({ target: e.target, type: "characterData", oldValue: e.prevValue });
  4429. this.flushSoon();
  4430. };
  4431. }
  4432. this.onSelectionChange = this.onSelectionChange.bind(this);
  4433. }
  4434. flushSoon() {
  4435. if (this.flushingSoon < 0)
  4436. this.flushingSoon = window.setTimeout(() => { this.flushingSoon = -1; this.flush(); }, 20);
  4437. }
  4438. forceFlush() {
  4439. if (this.flushingSoon > -1) {
  4440. window.clearTimeout(this.flushingSoon);
  4441. this.flushingSoon = -1;
  4442. this.flush();
  4443. }
  4444. }
  4445. start() {
  4446. if (this.observer) {
  4447. this.observer.takeRecords();
  4448. this.observer.observe(this.view.dom, observeOptions);
  4449. }
  4450. if (this.onCharData)
  4451. this.view.dom.addEventListener("DOMCharacterDataModified", this.onCharData);
  4452. this.connectSelection();
  4453. }
  4454. stop() {
  4455. if (this.observer) {
  4456. let take = this.observer.takeRecords();
  4457. if (take.length) {
  4458. for (let i = 0; i < take.length; i++)
  4459. this.queue.push(take[i]);
  4460. window.setTimeout(() => this.flush(), 20);
  4461. }
  4462. this.observer.disconnect();
  4463. }
  4464. if (this.onCharData)
  4465. this.view.dom.removeEventListener("DOMCharacterDataModified", this.onCharData);
  4466. this.disconnectSelection();
  4467. }
  4468. connectSelection() {
  4469. this.view.dom.ownerDocument.addEventListener("selectionchange", this.onSelectionChange);
  4470. }
  4471. disconnectSelection() {
  4472. this.view.dom.ownerDocument.removeEventListener("selectionchange", this.onSelectionChange);
  4473. }
  4474. suppressSelectionUpdates() {
  4475. this.suppressingSelectionUpdates = true;
  4476. setTimeout(() => this.suppressingSelectionUpdates = false, 50);
  4477. }
  4478. onSelectionChange() {
  4479. if (!hasFocusAndSelection(this.view))
  4480. return;
  4481. if (this.suppressingSelectionUpdates)
  4482. return selectionToDOM(this.view);
  4483. // Deletions on IE11 fire their events in the wrong order, giving
  4484. // us a selection change event before the DOM changes are
  4485. // reported.
  4486. if (ie && ie_version <= 11 && !this.view.state.selection.empty) {
  4487. let sel = this.view.domSelectionRange();
  4488. // Selection.isCollapsed isn't reliable on IE
  4489. if (sel.focusNode && isEquivalentPosition(sel.focusNode, sel.focusOffset, sel.anchorNode, sel.anchorOffset))
  4490. return this.flushSoon();
  4491. }
  4492. this.flush();
  4493. }
  4494. setCurSelection() {
  4495. this.currentSelection.set(this.view.domSelectionRange());
  4496. }
  4497. ignoreSelectionChange(sel) {
  4498. if (!sel.focusNode)
  4499. return true;
  4500. let ancestors = new Set, container;
  4501. for (let scan = sel.focusNode; scan; scan = parentNode(scan))
  4502. ancestors.add(scan);
  4503. for (let scan = sel.anchorNode; scan; scan = parentNode(scan))
  4504. if (ancestors.has(scan)) {
  4505. container = scan;
  4506. break;
  4507. }
  4508. let desc = container && this.view.docView.nearestDesc(container);
  4509. if (desc && desc.ignoreMutation({
  4510. type: "selection",
  4511. target: container.nodeType == 3 ? container.parentNode : container
  4512. })) {
  4513. this.setCurSelection();
  4514. return true;
  4515. }
  4516. }
  4517. pendingRecords() {
  4518. if (this.observer)
  4519. for (let mut of this.observer.takeRecords())
  4520. this.queue.push(mut);
  4521. return this.queue;
  4522. }
  4523. flush() {
  4524. let { view } = this;
  4525. if (!view.docView || this.flushingSoon > -1)
  4526. return;
  4527. let mutations = this.pendingRecords();
  4528. if (mutations.length)
  4529. this.queue = [];
  4530. let sel = view.domSelectionRange();
  4531. let newSel = !this.suppressingSelectionUpdates && !this.currentSelection.eq(sel) && hasFocusAndSelection(view) && !this.ignoreSelectionChange(sel);
  4532. let from = -1, to = -1, typeOver = false, added = [];
  4533. if (view.editable) {
  4534. for (let i = 0; i < mutations.length; i++) {
  4535. let result = this.registerMutation(mutations[i], added);
  4536. if (result) {
  4537. from = from < 0 ? result.from : Math.min(result.from, from);
  4538. to = to < 0 ? result.to : Math.max(result.to, to);
  4539. if (result.typeOver)
  4540. typeOver = true;
  4541. }
  4542. }
  4543. }
  4544. if (gecko && added.length > 1) {
  4545. let brs = added.filter(n => n.nodeName == "BR");
  4546. if (brs.length == 2) {
  4547. let a = brs[0], b = brs[1];
  4548. if (a.parentNode && a.parentNode.parentNode == b.parentNode)
  4549. b.remove();
  4550. else
  4551. a.remove();
  4552. }
  4553. }
  4554. let readSel = null;
  4555. // If it looks like the browser has reset the selection to the
  4556. // start of the document after focus, restore the selection from
  4557. // the state
  4558. if (from < 0 && newSel && view.input.lastFocus > Date.now() - 200 &&
  4559. Math.max(view.input.lastTouch, view.input.lastClick.time) < Date.now() - 300 &&
  4560. selectionCollapsed(sel) && (readSel = selectionFromDOM(view)) &&
  4561. readSel.eq(Selection.near(view.state.doc.resolve(0), 1))) {
  4562. view.input.lastFocus = 0;
  4563. selectionToDOM(view);
  4564. this.currentSelection.set(sel);
  4565. view.scrollToSelection();
  4566. }
  4567. else if (from > -1 || newSel) {
  4568. if (from > -1) {
  4569. view.docView.markDirty(from, to);
  4570. checkCSS(view);
  4571. }
  4572. this.handleDOMChange(from, to, typeOver, added);
  4573. if (view.docView && view.docView.dirty)
  4574. view.updateState(view.state);
  4575. else if (!this.currentSelection.eq(sel))
  4576. selectionToDOM(view);
  4577. this.currentSelection.set(sel);
  4578. }
  4579. }
  4580. registerMutation(mut, added) {
  4581. // Ignore mutations inside nodes that were already noted as inserted
  4582. if (added.indexOf(mut.target) > -1)
  4583. return null;
  4584. let desc = this.view.docView.nearestDesc(mut.target);
  4585. if (mut.type == "attributes" &&
  4586. (desc == this.view.docView || mut.attributeName == "contenteditable" ||
  4587. // Firefox sometimes fires spurious events for null/empty styles
  4588. (mut.attributeName == "style" && !mut.oldValue && !mut.target.getAttribute("style"))))
  4589. return null;
  4590. if (!desc || desc.ignoreMutation(mut))
  4591. return null;
  4592. if (mut.type == "childList") {
  4593. for (let i = 0; i < mut.addedNodes.length; i++)
  4594. added.push(mut.addedNodes[i]);
  4595. if (desc.contentDOM && desc.contentDOM != desc.dom && !desc.contentDOM.contains(mut.target))
  4596. return { from: desc.posBefore, to: desc.posAfter };
  4597. let prev = mut.previousSibling, next = mut.nextSibling;
  4598. if (ie && ie_version <= 11 && mut.addedNodes.length) {
  4599. // IE11 gives us incorrect next/prev siblings for some
  4600. // insertions, so if there are added nodes, recompute those
  4601. for (let i = 0; i < mut.addedNodes.length; i++) {
  4602. let { previousSibling, nextSibling } = mut.addedNodes[i];
  4603. if (!previousSibling || Array.prototype.indexOf.call(mut.addedNodes, previousSibling) < 0)
  4604. prev = previousSibling;
  4605. if (!nextSibling || Array.prototype.indexOf.call(mut.addedNodes, nextSibling) < 0)
  4606. next = nextSibling;
  4607. }
  4608. }
  4609. let fromOffset = prev && prev.parentNode == mut.target
  4610. ? domIndex(prev) + 1 : 0;
  4611. let from = desc.localPosFromDOM(mut.target, fromOffset, -1);
  4612. let toOffset = next && next.parentNode == mut.target
  4613. ? domIndex(next) : mut.target.childNodes.length;
  4614. let to = desc.localPosFromDOM(mut.target, toOffset, 1);
  4615. return { from, to };
  4616. }
  4617. else if (mut.type == "attributes") {
  4618. return { from: desc.posAtStart - desc.border, to: desc.posAtEnd + desc.border };
  4619. }
  4620. else { // "characterData"
  4621. return {
  4622. from: desc.posAtStart,
  4623. to: desc.posAtEnd,
  4624. // An event was generated for a text change that didn't change
  4625. // any text. Mark the dom change to fall back to assuming the
  4626. // selection was typed over with an identical value if it can't
  4627. // find another change.
  4628. typeOver: mut.target.nodeValue == mut.oldValue
  4629. };
  4630. }
  4631. }
  4632. }
  4633. let cssChecked = new WeakMap();
  4634. let cssCheckWarned = false;
  4635. function checkCSS(view) {
  4636. if (cssChecked.has(view))
  4637. return;
  4638. cssChecked.set(view, null);
  4639. if (['normal', 'nowrap', 'pre-line'].indexOf(getComputedStyle(view.dom).whiteSpace) !== -1) {
  4640. view.requiresGeckoHackNode = gecko;
  4641. if (cssCheckWarned)
  4642. return;
  4643. console["warn"]("ProseMirror expects the CSS white-space property to be set, preferably to 'pre-wrap'. It is recommended to load style/prosemirror.css from the prosemirror-view package.");
  4644. cssCheckWarned = true;
  4645. }
  4646. }
  4647. // Used to work around a Safari Selection/shadow DOM bug
  4648. // Based on https://github.com/codemirror/dev/issues/414 fix
  4649. function safariShadowSelectionRange(view) {
  4650. let found;
  4651. function read(event) {
  4652. event.preventDefault();
  4653. event.stopImmediatePropagation();
  4654. found = event.getTargetRanges()[0];
  4655. }
  4656. // Because Safari (at least in 2018-2022) doesn't provide regular
  4657. // access to the selection inside a shadowRoot, we have to perform a
  4658. // ridiculous hack to get at it—using `execCommand` to trigger a
  4659. // `beforeInput` event so that we can read the target range from the
  4660. // event.
  4661. view.dom.addEventListener("beforeinput", read, true);
  4662. document.execCommand("indent");
  4663. view.dom.removeEventListener("beforeinput", read, true);
  4664. let anchorNode = found.startContainer, anchorOffset = found.startOffset;
  4665. let focusNode = found.endContainer, focusOffset = found.endOffset;
  4666. let currentAnchor = view.domAtPos(view.state.selection.anchor);
  4667. // Since such a range doesn't distinguish between anchor and head,
  4668. // use a heuristic that flips it around if its end matches the
  4669. // current anchor.
  4670. if (isEquivalentPosition(currentAnchor.node, currentAnchor.offset, focusNode, focusOffset))
  4671. [anchorNode, anchorOffset, focusNode, focusOffset] = [focusNode, focusOffset, anchorNode, anchorOffset];
  4672. return { anchorNode, anchorOffset, focusNode, focusOffset };
  4673. }
  4674. // Note that all referencing and parsing is done with the
  4675. // start-of-operation selection and document, since that's the one
  4676. // that the DOM represents. If any changes came in in the meantime,
  4677. // the modification is mapped over those before it is applied, in
  4678. // readDOMChange.
  4679. function parseBetween(view, from_, to_) {
  4680. let { node: parent, fromOffset, toOffset, from, to } = view.docView.parseRange(from_, to_);
  4681. let domSel = view.domSelectionRange();
  4682. let find;
  4683. let anchor = domSel.anchorNode;
  4684. if (anchor && view.dom.contains(anchor.nodeType == 1 ? anchor : anchor.parentNode)) {
  4685. find = [{ node: anchor, offset: domSel.anchorOffset }];
  4686. if (!selectionCollapsed(domSel))
  4687. find.push({ node: domSel.focusNode, offset: domSel.focusOffset });
  4688. }
  4689. // Work around issue in Chrome where backspacing sometimes replaces
  4690. // the deleted content with a random BR node (issues #799, #831)
  4691. if (chrome && view.input.lastKeyCode === 8) {
  4692. for (let off = toOffset; off > fromOffset; off--) {
  4693. let node = parent.childNodes[off - 1], desc = node.pmViewDesc;
  4694. if (node.nodeName == "BR" && !desc) {
  4695. toOffset = off;
  4696. break;
  4697. }
  4698. if (!desc || desc.size)
  4699. break;
  4700. }
  4701. }
  4702. let startDoc = view.state.doc;
  4703. let parser = view.someProp("domParser") || DOMParser.fromSchema(view.state.schema);
  4704. let $from = startDoc.resolve(from);
  4705. let sel = null, doc = parser.parse(parent, {
  4706. topNode: $from.parent,
  4707. topMatch: $from.parent.contentMatchAt($from.index()),
  4708. topOpen: true,
  4709. from: fromOffset,
  4710. to: toOffset,
  4711. preserveWhitespace: $from.parent.type.whitespace == "pre" ? "full" : true,
  4712. findPositions: find,
  4713. ruleFromNode,
  4714. context: $from
  4715. });
  4716. if (find && find[0].pos != null) {
  4717. let anchor = find[0].pos, head = find[1] && find[1].pos;
  4718. if (head == null)
  4719. head = anchor;
  4720. sel = { anchor: anchor + from, head: head + from };
  4721. }
  4722. return { doc, sel, from, to };
  4723. }
  4724. function ruleFromNode(dom) {
  4725. let desc = dom.pmViewDesc;
  4726. if (desc) {
  4727. return desc.parseRule();
  4728. }
  4729. else if (dom.nodeName == "BR" && dom.parentNode) {
  4730. // Safari replaces the list item or table cell with a BR
  4731. // directly in the list node (?!) if you delete the last
  4732. // character in a list item or table cell (#708, #862)
  4733. if (safari && /^(ul|ol)$/i.test(dom.parentNode.nodeName)) {
  4734. let skip = document.createElement("div");
  4735. skip.appendChild(document.createElement("li"));
  4736. return { skip };
  4737. }
  4738. else if (dom.parentNode.lastChild == dom || safari && /^(tr|table)$/i.test(dom.parentNode.nodeName)) {
  4739. return { ignore: true };
  4740. }
  4741. }
  4742. else if (dom.nodeName == "IMG" && dom.getAttribute("mark-placeholder")) {
  4743. return { ignore: true };
  4744. }
  4745. return null;
  4746. }
  4747. const isInline = /^(a|abbr|acronym|b|bd[io]|big|br|button|cite|code|data(list)?|del|dfn|em|i|ins|kbd|label|map|mark|meter|output|q|ruby|s|samp|small|span|strong|su[bp]|time|u|tt|var)$/i;
  4748. function readDOMChange(view, from, to, typeOver, addedNodes) {
  4749. let compositionID = view.input.compositionPendingChanges || (view.composing ? view.input.compositionID : 0);
  4750. view.input.compositionPendingChanges = 0;
  4751. if (from < 0) {
  4752. let origin = view.input.lastSelectionTime > Date.now() - 50 ? view.input.lastSelectionOrigin : null;
  4753. let newSel = selectionFromDOM(view, origin);
  4754. if (newSel && !view.state.selection.eq(newSel)) {
  4755. if (chrome && android &&
  4756. view.input.lastKeyCode === 13 && Date.now() - 100 < view.input.lastKeyCodeTime &&
  4757. view.someProp("handleKeyDown", f => f(view, keyEvent(13, "Enter"))))
  4758. return;
  4759. let tr = view.state.tr.setSelection(newSel);
  4760. if (origin == "pointer")
  4761. tr.setMeta("pointer", true);
  4762. else if (origin == "key")
  4763. tr.scrollIntoView();
  4764. if (compositionID)
  4765. tr.setMeta("composition", compositionID);
  4766. view.dispatch(tr);
  4767. }
  4768. return;
  4769. }
  4770. let $before = view.state.doc.resolve(from);
  4771. let shared = $before.sharedDepth(to);
  4772. from = $before.before(shared + 1);
  4773. to = view.state.doc.resolve(to).after(shared + 1);
  4774. let sel = view.state.selection;
  4775. let parse = parseBetween(view, from, to);
  4776. let doc = view.state.doc, compare = doc.slice(parse.from, parse.to);
  4777. let preferredPos, preferredSide;
  4778. // Prefer anchoring to end when Backspace is pressed
  4779. if (view.input.lastKeyCode === 8 && Date.now() - 100 < view.input.lastKeyCodeTime) {
  4780. preferredPos = view.state.selection.to;
  4781. preferredSide = "end";
  4782. }
  4783. else {
  4784. preferredPos = view.state.selection.from;
  4785. preferredSide = "start";
  4786. }
  4787. view.input.lastKeyCode = null;
  4788. let change = findDiff(compare.content, parse.doc.content, parse.from, preferredPos, preferredSide);
  4789. if ((ios && view.input.lastIOSEnter > Date.now() - 225 || android) &&
  4790. addedNodes.some(n => n.nodeType == 1 && !isInline.test(n.nodeName)) &&
  4791. (!change || change.endA >= change.endB) &&
  4792. view.someProp("handleKeyDown", f => f(view, keyEvent(13, "Enter")))) {
  4793. view.input.lastIOSEnter = 0;
  4794. return;
  4795. }
  4796. if (!change) {
  4797. if (typeOver && sel instanceof TextSelection && !sel.empty && sel.$head.sameParent(sel.$anchor) &&
  4798. !view.composing && !(parse.sel && parse.sel.anchor != parse.sel.head)) {
  4799. change = { start: sel.from, endA: sel.to, endB: sel.to };
  4800. }
  4801. else {
  4802. if (parse.sel) {
  4803. let sel = resolveSelection(view, view.state.doc, parse.sel);
  4804. if (sel && !sel.eq(view.state.selection)) {
  4805. let tr = view.state.tr.setSelection(sel);
  4806. if (compositionID)
  4807. tr.setMeta("composition", compositionID);
  4808. view.dispatch(tr);
  4809. }
  4810. }
  4811. return;
  4812. }
  4813. }
  4814. // Chrome sometimes leaves the cursor before the inserted text when
  4815. // composing after a cursor wrapper. This moves it forward.
  4816. if (chrome && view.cursorWrapper && parse.sel && parse.sel.anchor == view.cursorWrapper.deco.from &&
  4817. parse.sel.head == parse.sel.anchor) {
  4818. let size = change.endB - change.start;
  4819. parse.sel = { anchor: parse.sel.anchor + size, head: parse.sel.anchor + size };
  4820. }
  4821. view.input.domChangeCount++;
  4822. // Handle the case where overwriting a selection by typing matches
  4823. // the start or end of the selected content, creating a change
  4824. // that's smaller than what was actually overwritten.
  4825. if (view.state.selection.from < view.state.selection.to &&
  4826. change.start == change.endB &&
  4827. view.state.selection instanceof TextSelection) {
  4828. if (change.start > view.state.selection.from && change.start <= view.state.selection.from + 2 &&
  4829. view.state.selection.from >= parse.from) {
  4830. change.start = view.state.selection.from;
  4831. }
  4832. else if (change.endA < view.state.selection.to && change.endA >= view.state.selection.to - 2 &&
  4833. view.state.selection.to <= parse.to) {
  4834. change.endB += (view.state.selection.to - change.endA);
  4835. change.endA = view.state.selection.to;
  4836. }
  4837. }
  4838. // IE11 will insert a non-breaking space _ahead_ of the space after
  4839. // the cursor space when adding a space before another space. When
  4840. // that happened, adjust the change to cover the space instead.
  4841. if (ie && ie_version <= 11 && change.endB == change.start + 1 &&
  4842. change.endA == change.start && change.start > parse.from &&
  4843. parse.doc.textBetween(change.start - parse.from - 1, change.start - parse.from + 1) == " \u00a0") {
  4844. change.start--;
  4845. change.endA--;
  4846. change.endB--;
  4847. }
  4848. let $from = parse.doc.resolveNoCache(change.start - parse.from);
  4849. let $to = parse.doc.resolveNoCache(change.endB - parse.from);
  4850. let $fromA = doc.resolve(change.start);
  4851. let inlineChange = $from.sameParent($to) && $from.parent.inlineContent && $fromA.end() >= change.endA;
  4852. let nextSel;
  4853. // If this looks like the effect of pressing Enter (or was recorded
  4854. // as being an iOS enter press), just dispatch an Enter key instead.
  4855. if (((ios && view.input.lastIOSEnter > Date.now() - 225 &&
  4856. (!inlineChange || addedNodes.some(n => n.nodeName == "DIV" || n.nodeName == "P"))) ||
  4857. (!inlineChange && $from.pos < parse.doc.content.size && !$from.sameParent($to) &&
  4858. (nextSel = Selection.findFrom(parse.doc.resolve($from.pos + 1), 1, true)) &&
  4859. nextSel.head == $to.pos)) &&
  4860. view.someProp("handleKeyDown", f => f(view, keyEvent(13, "Enter")))) {
  4861. view.input.lastIOSEnter = 0;
  4862. return;
  4863. }
  4864. // Same for backspace
  4865. if (view.state.selection.anchor > change.start &&
  4866. looksLikeJoin(doc, change.start, change.endA, $from, $to) &&
  4867. view.someProp("handleKeyDown", f => f(view, keyEvent(8, "Backspace")))) {
  4868. if (android && chrome)
  4869. view.domObserver.suppressSelectionUpdates(); // #820
  4870. return;
  4871. }
  4872. // Chrome Android will occasionally, during composition, delete the
  4873. // entire composition and then immediately insert it again. This is
  4874. // used to detect that situation.
  4875. if (chrome && android && change.endB == change.start)
  4876. view.input.lastAndroidDelete = Date.now();
  4877. // This tries to detect Android virtual keyboard
  4878. // enter-and-pick-suggestion action. That sometimes (see issue
  4879. // #1059) first fires a DOM mutation, before moving the selection to
  4880. // the newly created block. And then, because ProseMirror cleans up
  4881. // the DOM selection, it gives up moving the selection entirely,
  4882. // leaving the cursor in the wrong place. When that happens, we drop
  4883. // the new paragraph from the initial change, and fire a simulated
  4884. // enter key afterwards.
  4885. if (android && !inlineChange && $from.start() != $to.start() && $to.parentOffset == 0 && $from.depth == $to.depth &&
  4886. parse.sel && parse.sel.anchor == parse.sel.head && parse.sel.head == change.endA) {
  4887. change.endB -= 2;
  4888. $to = parse.doc.resolveNoCache(change.endB - parse.from);
  4889. setTimeout(() => {
  4890. view.someProp("handleKeyDown", function (f) { return f(view, keyEvent(13, "Enter")); });
  4891. }, 20);
  4892. }
  4893. let chFrom = change.start, chTo = change.endA;
  4894. let tr, storedMarks, markChange;
  4895. if (inlineChange) {
  4896. if ($from.pos == $to.pos) { // Deletion
  4897. // IE11 sometimes weirdly moves the DOM selection around after
  4898. // backspacing out the first element in a textblock
  4899. if (ie && ie_version <= 11 && $from.parentOffset == 0) {
  4900. view.domObserver.suppressSelectionUpdates();
  4901. setTimeout(() => selectionToDOM(view), 20);
  4902. }
  4903. tr = view.state.tr.delete(chFrom, chTo);
  4904. storedMarks = doc.resolve(change.start).marksAcross(doc.resolve(change.endA));
  4905. }
  4906. else if ( // Adding or removing a mark
  4907. change.endA == change.endB &&
  4908. (markChange = isMarkChange($from.parent.content.cut($from.parentOffset, $to.parentOffset), $fromA.parent.content.cut($fromA.parentOffset, change.endA - $fromA.start())))) {
  4909. tr = view.state.tr;
  4910. if (markChange.type == "add")
  4911. tr.addMark(chFrom, chTo, markChange.mark);
  4912. else
  4913. tr.removeMark(chFrom, chTo, markChange.mark);
  4914. }
  4915. else if ($from.parent.child($from.index()).isText && $from.index() == $to.index() - ($to.textOffset ? 0 : 1)) {
  4916. // Both positions in the same text node -- simply insert text
  4917. let text = $from.parent.textBetween($from.parentOffset, $to.parentOffset);
  4918. if (view.someProp("handleTextInput", f => f(view, chFrom, chTo, text)))
  4919. return;
  4920. tr = view.state.tr.insertText(text, chFrom, chTo);
  4921. }
  4922. }
  4923. if (!tr)
  4924. tr = view.state.tr.replace(chFrom, chTo, parse.doc.slice(change.start - parse.from, change.endB - parse.from));
  4925. if (parse.sel) {
  4926. let sel = resolveSelection(view, tr.doc, parse.sel);
  4927. // Chrome Android will sometimes, during composition, report the
  4928. // selection in the wrong place. If it looks like that is
  4929. // happening, don't update the selection.
  4930. // Edge just doesn't move the cursor forward when you start typing
  4931. // in an empty block or between br nodes.
  4932. if (sel && !(chrome && android && view.composing && sel.empty &&
  4933. (change.start != change.endB || view.input.lastAndroidDelete < Date.now() - 100) &&
  4934. (sel.head == chFrom || sel.head == tr.mapping.map(chTo) - 1) ||
  4935. ie && sel.empty && sel.head == chFrom))
  4936. tr.setSelection(sel);
  4937. }
  4938. if (storedMarks)
  4939. tr.ensureMarks(storedMarks);
  4940. if (compositionID)
  4941. tr.setMeta("composition", compositionID);
  4942. view.dispatch(tr.scrollIntoView());
  4943. }
  4944. function resolveSelection(view, doc, parsedSel) {
  4945. if (Math.max(parsedSel.anchor, parsedSel.head) > doc.content.size)
  4946. return null;
  4947. return selectionBetween(view, doc.resolve(parsedSel.anchor), doc.resolve(parsedSel.head));
  4948. }
  4949. // Given two same-length, non-empty fragments of inline content,
  4950. // determine whether the first could be created from the second by
  4951. // removing or adding a single mark type.
  4952. function isMarkChange(cur, prev) {
  4953. let curMarks = cur.firstChild.marks, prevMarks = prev.firstChild.marks;
  4954. let added = curMarks, removed = prevMarks, type, mark, update;
  4955. for (let i = 0; i < prevMarks.length; i++)
  4956. added = prevMarks[i].removeFromSet(added);
  4957. for (let i = 0; i < curMarks.length; i++)
  4958. removed = curMarks[i].removeFromSet(removed);
  4959. if (added.length == 1 && removed.length == 0) {
  4960. mark = added[0];
  4961. type = "add";
  4962. update = (node) => node.mark(mark.addToSet(node.marks));
  4963. }
  4964. else if (added.length == 0 && removed.length == 1) {
  4965. mark = removed[0];
  4966. type = "remove";
  4967. update = (node) => node.mark(mark.removeFromSet(node.marks));
  4968. }
  4969. else {
  4970. return null;
  4971. }
  4972. let updated = [];
  4973. for (let i = 0; i < prev.childCount; i++)
  4974. updated.push(update(prev.child(i)));
  4975. if (Fragment.from(updated).eq(cur))
  4976. return { mark, type };
  4977. }
  4978. function looksLikeJoin(old, start, end, $newStart, $newEnd) {
  4979. if (!$newStart.parent.isTextblock ||
  4980. // The content must have shrunk
  4981. end - start <= $newEnd.pos - $newStart.pos ||
  4982. // newEnd must point directly at or after the end of the block that newStart points into
  4983. skipClosingAndOpening($newStart, true, false) < $newEnd.pos)
  4984. return false;
  4985. let $start = old.resolve(start);
  4986. // Start must be at the end of a block
  4987. if ($start.parentOffset < $start.parent.content.size || !$start.parent.isTextblock)
  4988. return false;
  4989. let $next = old.resolve(skipClosingAndOpening($start, true, true));
  4990. // The next textblock must start before end and end near it
  4991. if (!$next.parent.isTextblock || $next.pos > end ||
  4992. skipClosingAndOpening($next, true, false) < end)
  4993. return false;
  4994. // The fragments after the join point must match
  4995. return $newStart.parent.content.cut($newStart.parentOffset).eq($next.parent.content);
  4996. }
  4997. function skipClosingAndOpening($pos, fromEnd, mayOpen) {
  4998. let depth = $pos.depth, end = fromEnd ? $pos.end() : $pos.pos;
  4999. while (depth > 0 && (fromEnd || $pos.indexAfter(depth) == $pos.node(depth).childCount)) {
  5000. depth--;
  5001. end++;
  5002. fromEnd = false;
  5003. }
  5004. if (mayOpen) {
  5005. let next = $pos.node(depth).maybeChild($pos.indexAfter(depth));
  5006. while (next && !next.isLeaf) {
  5007. next = next.firstChild;
  5008. end++;
  5009. }
  5010. }
  5011. return end;
  5012. }
  5013. function findDiff(a, b, pos, preferredPos, preferredSide) {
  5014. let start = a.findDiffStart(b, pos);
  5015. if (start == null)
  5016. return null;
  5017. let { a: endA, b: endB } = a.findDiffEnd(b, pos + a.size, pos + b.size);
  5018. if (preferredSide == "end") {
  5019. let adjust = Math.max(0, start - Math.min(endA, endB));
  5020. preferredPos -= endA + adjust - start;
  5021. }
  5022. if (endA < start && a.size < b.size) {
  5023. let move = preferredPos <= start && preferredPos >= endA ? start - preferredPos : 0;
  5024. start -= move;
  5025. if (start && start < b.size && isSurrogatePair(b.textBetween(start - 1, start + 1)))
  5026. start += move ? 1 : -1;
  5027. endB = start + (endB - endA);
  5028. endA = start;
  5029. }
  5030. else if (endB < start) {
  5031. let move = preferredPos <= start && preferredPos >= endB ? start - preferredPos : 0;
  5032. start -= move;
  5033. if (start && start < a.size && isSurrogatePair(a.textBetween(start - 1, start + 1)))
  5034. start += move ? 1 : -1;
  5035. endA = start + (endA - endB);
  5036. endB = start;
  5037. }
  5038. return { start, endA, endB };
  5039. }
  5040. function isSurrogatePair(str) {
  5041. if (str.length != 2)
  5042. return false;
  5043. let a = str.charCodeAt(0), b = str.charCodeAt(1);
  5044. return a >= 0xDC00 && a <= 0xDFFF && b >= 0xD800 && b <= 0xDBFF;
  5045. }
  5046. /**
  5047. @internal
  5048. */
  5049. const __serializeForClipboard = serializeForClipboard;
  5050. /**
  5051. @internal
  5052. */
  5053. const __parseFromClipboard = parseFromClipboard;
  5054. /**
  5055. @internal
  5056. */
  5057. const __endComposition = endComposition;
  5058. /**
  5059. An editor view manages the DOM structure that represents an
  5060. editable document. Its state and behavior are determined by its
  5061. [props](https://prosemirror.net/docs/ref/#view.DirectEditorProps).
  5062. */
  5063. class EditorView {
  5064. /**
  5065. Create a view. `place` may be a DOM node that the editor should
  5066. be appended to, a function that will place it into the document,
  5067. or an object whose `mount` property holds the node to use as the
  5068. document container. If it is `null`, the editor will not be
  5069. added to the document.
  5070. */
  5071. constructor(place, props) {
  5072. this._root = null;
  5073. /**
  5074. @internal
  5075. */
  5076. this.focused = false;
  5077. /**
  5078. Kludge used to work around a Chrome bug @internal
  5079. */
  5080. this.trackWrites = null;
  5081. this.mounted = false;
  5082. /**
  5083. @internal
  5084. */
  5085. this.markCursor = null;
  5086. /**
  5087. @internal
  5088. */
  5089. this.cursorWrapper = null;
  5090. /**
  5091. @internal
  5092. */
  5093. this.lastSelectedViewDesc = undefined;
  5094. /**
  5095. @internal
  5096. */
  5097. this.input = new InputState;
  5098. this.prevDirectPlugins = [];
  5099. this.pluginViews = [];
  5100. /**
  5101. Holds `true` when a hack node is needed in Firefox to prevent the
  5102. [space is eaten issue](https://github.com/ProseMirror/prosemirror/issues/651)
  5103. @internal
  5104. */
  5105. this.requiresGeckoHackNode = false;
  5106. /**
  5107. When editor content is being dragged, this object contains
  5108. information about the dragged slice and whether it is being
  5109. copied or moved. At any other time, it is null.
  5110. */
  5111. this.dragging = null;
  5112. this._props = props;
  5113. this.state = props.state;
  5114. this.directPlugins = props.plugins || [];
  5115. this.directPlugins.forEach(checkStateComponent);
  5116. this.dispatch = this.dispatch.bind(this);
  5117. this.dom = (place && place.mount) || document.createElement("div");
  5118. if (place) {
  5119. if (place.appendChild)
  5120. place.appendChild(this.dom);
  5121. else if (typeof place == "function")
  5122. place(this.dom);
  5123. else if (place.mount)
  5124. this.mounted = true;
  5125. }
  5126. this.editable = getEditable(this);
  5127. updateCursorWrapper(this);
  5128. this.nodeViews = buildNodeViews(this);
  5129. this.docView = docViewDesc(this.state.doc, computeDocDeco(this), viewDecorations(this), this.dom, this);
  5130. this.domObserver = new DOMObserver(this, (from, to, typeOver, added) => readDOMChange(this, from, to, typeOver, added));
  5131. this.domObserver.start();
  5132. initInput(this);
  5133. this.updatePluginViews();
  5134. }
  5135. /**
  5136. Holds `true` when a
  5137. [composition](https://w3c.github.io/uievents/#events-compositionevents)
  5138. is active.
  5139. */
  5140. get composing() { return this.input.composing; }
  5141. /**
  5142. The view's current [props](https://prosemirror.net/docs/ref/#view.EditorProps).
  5143. */
  5144. get props() {
  5145. if (this._props.state != this.state) {
  5146. let prev = this._props;
  5147. this._props = {};
  5148. for (let name in prev)
  5149. this._props[name] = prev[name];
  5150. this._props.state = this.state;
  5151. }
  5152. return this._props;
  5153. }
  5154. /**
  5155. Update the view's props. Will immediately cause an update to
  5156. the DOM.
  5157. */
  5158. update(props) {
  5159. if (props.handleDOMEvents != this._props.handleDOMEvents)
  5160. ensureListeners(this);
  5161. let prevProps = this._props;
  5162. this._props = props;
  5163. if (props.plugins) {
  5164. props.plugins.forEach(checkStateComponent);
  5165. this.directPlugins = props.plugins;
  5166. }
  5167. this.updateStateInner(props.state, prevProps);
  5168. }
  5169. /**
  5170. Update the view by updating existing props object with the object
  5171. given as argument. Equivalent to `view.update(Object.assign({},
  5172. view.props, props))`.
  5173. */
  5174. setProps(props) {
  5175. let updated = {};
  5176. for (let name in this._props)
  5177. updated[name] = this._props[name];
  5178. updated.state = this.state;
  5179. for (let name in props)
  5180. updated[name] = props[name];
  5181. this.update(updated);
  5182. }
  5183. /**
  5184. Update the editor's `state` prop, without touching any of the
  5185. other props.
  5186. */
  5187. updateState(state) {
  5188. this.updateStateInner(state, this._props);
  5189. }
  5190. updateStateInner(state, prevProps) {
  5191. var _a;
  5192. let prev = this.state, redraw = false, updateSel = false;
  5193. // When stored marks are added, stop composition, so that they can
  5194. // be displayed.
  5195. if (state.storedMarks && this.composing) {
  5196. clearComposition(this);
  5197. updateSel = true;
  5198. }
  5199. this.state = state;
  5200. let pluginsChanged = prev.plugins != state.plugins || this._props.plugins != prevProps.plugins;
  5201. if (pluginsChanged || this._props.plugins != prevProps.plugins || this._props.nodeViews != prevProps.nodeViews) {
  5202. let nodeViews = buildNodeViews(this);
  5203. if (changedNodeViews(nodeViews, this.nodeViews)) {
  5204. this.nodeViews = nodeViews;
  5205. redraw = true;
  5206. }
  5207. }
  5208. if (pluginsChanged || prevProps.handleDOMEvents != this._props.handleDOMEvents) {
  5209. ensureListeners(this);
  5210. }
  5211. this.editable = getEditable(this);
  5212. updateCursorWrapper(this);
  5213. let innerDeco = viewDecorations(this), outerDeco = computeDocDeco(this);
  5214. let scroll = prev.plugins != state.plugins && !prev.doc.eq(state.doc) ? "reset"
  5215. : state.scrollToSelection > prev.scrollToSelection ? "to selection" : "preserve";
  5216. let updateDoc = redraw || !this.docView.matchesNode(state.doc, outerDeco, innerDeco);
  5217. if (updateDoc || !state.selection.eq(prev.selection))
  5218. updateSel = true;
  5219. let oldScrollPos = scroll == "preserve" && updateSel && this.dom.style.overflowAnchor == null && storeScrollPos(this);
  5220. if (updateSel) {
  5221. this.domObserver.stop();
  5222. // Work around an issue in Chrome, IE, and Edge where changing
  5223. // the DOM around an active selection puts it into a broken
  5224. // state where the thing the user sees differs from the
  5225. // selection reported by the Selection object (#710, #973,
  5226. // #1011, #1013, #1035).
  5227. let forceSelUpdate = updateDoc && (ie || chrome) && !this.composing &&
  5228. !prev.selection.empty && !state.selection.empty && selectionContextChanged(prev.selection, state.selection);
  5229. if (updateDoc) {
  5230. // If the node that the selection points into is written to,
  5231. // Chrome sometimes starts misreporting the selection, so this
  5232. // tracks that and forces a selection reset when our update
  5233. // did write to the node.
  5234. let chromeKludge = chrome ? (this.trackWrites = this.domSelectionRange().focusNode) : null;
  5235. if (redraw || !this.docView.update(state.doc, outerDeco, innerDeco, this)) {
  5236. this.docView.updateOuterDeco([]);
  5237. this.docView.destroy();
  5238. this.docView = docViewDesc(state.doc, outerDeco, innerDeco, this.dom, this);
  5239. }
  5240. if (chromeKludge && !this.trackWrites)
  5241. forceSelUpdate = true;
  5242. }
  5243. // Work around for an issue where an update arriving right between
  5244. // a DOM selection change and the "selectionchange" event for it
  5245. // can cause a spurious DOM selection update, disrupting mouse
  5246. // drag selection.
  5247. if (forceSelUpdate ||
  5248. !(this.input.mouseDown && this.domObserver.currentSelection.eq(this.domSelectionRange()) &&
  5249. anchorInRightPlace(this))) {
  5250. selectionToDOM(this, forceSelUpdate);
  5251. }
  5252. else {
  5253. syncNodeSelection(this, state.selection);
  5254. this.domObserver.setCurSelection();
  5255. }
  5256. this.domObserver.start();
  5257. }
  5258. this.updatePluginViews(prev);
  5259. if (((_a = this.dragging) === null || _a === void 0 ? void 0 : _a.node) && !prev.doc.eq(state.doc))
  5260. this.updateDraggedNode(this.dragging, prev);
  5261. if (scroll == "reset") {
  5262. this.dom.scrollTop = 0;
  5263. }
  5264. else if (scroll == "to selection") {
  5265. this.scrollToSelection();
  5266. }
  5267. else if (oldScrollPos) {
  5268. resetScrollPos(oldScrollPos);
  5269. }
  5270. }
  5271. /**
  5272. @internal
  5273. */
  5274. scrollToSelection() {
  5275. let startDOM = this.domSelectionRange().focusNode;
  5276. if (this.someProp("handleScrollToSelection", f => f(this))) ;
  5277. else if (this.state.selection instanceof NodeSelection) {
  5278. let target = this.docView.domAfterPos(this.state.selection.from);
  5279. if (target.nodeType == 1)
  5280. scrollRectIntoView(this, target.getBoundingClientRect(), startDOM);
  5281. }
  5282. else {
  5283. scrollRectIntoView(this, this.coordsAtPos(this.state.selection.head, 1), startDOM);
  5284. }
  5285. }
  5286. destroyPluginViews() {
  5287. let view;
  5288. while (view = this.pluginViews.pop())
  5289. if (view.destroy)
  5290. view.destroy();
  5291. }
  5292. updatePluginViews(prevState) {
  5293. if (!prevState || prevState.plugins != this.state.plugins || this.directPlugins != this.prevDirectPlugins) {
  5294. this.prevDirectPlugins = this.directPlugins;
  5295. this.destroyPluginViews();
  5296. for (let i = 0; i < this.directPlugins.length; i++) {
  5297. let plugin = this.directPlugins[i];
  5298. if (plugin.spec.view)
  5299. this.pluginViews.push(plugin.spec.view(this));
  5300. }
  5301. for (let i = 0; i < this.state.plugins.length; i++) {
  5302. let plugin = this.state.plugins[i];
  5303. if (plugin.spec.view)
  5304. this.pluginViews.push(plugin.spec.view(this));
  5305. }
  5306. }
  5307. else {
  5308. for (let i = 0; i < this.pluginViews.length; i++) {
  5309. let pluginView = this.pluginViews[i];
  5310. if (pluginView.update)
  5311. pluginView.update(this, prevState);
  5312. }
  5313. }
  5314. }
  5315. updateDraggedNode(dragging, prev) {
  5316. let sel = dragging.node, found = -1;
  5317. if (this.state.doc.nodeAt(sel.from) == sel.node) {
  5318. found = sel.from;
  5319. }
  5320. else {
  5321. let movedPos = sel.from + (this.state.doc.content.size - prev.doc.content.size);
  5322. let moved = movedPos > 0 && this.state.doc.nodeAt(movedPos);
  5323. if (moved == sel.node)
  5324. found = movedPos;
  5325. }
  5326. this.dragging = new Dragging(dragging.slice, dragging.move, found < 0 ? undefined : NodeSelection.create(this.state.doc, found));
  5327. }
  5328. someProp(propName, f) {
  5329. let prop = this._props && this._props[propName], value;
  5330. if (prop != null && (value = f ? f(prop) : prop))
  5331. return value;
  5332. for (let i = 0; i < this.directPlugins.length; i++) {
  5333. let prop = this.directPlugins[i].props[propName];
  5334. if (prop != null && (value = f ? f(prop) : prop))
  5335. return value;
  5336. }
  5337. let plugins = this.state.plugins;
  5338. if (plugins)
  5339. for (let i = 0; i < plugins.length; i++) {
  5340. let prop = plugins[i].props[propName];
  5341. if (prop != null && (value = f ? f(prop) : prop))
  5342. return value;
  5343. }
  5344. }
  5345. /**
  5346. Query whether the view has focus.
  5347. */
  5348. hasFocus() {
  5349. // Work around IE not handling focus correctly if resize handles are shown.
  5350. // If the cursor is inside an element with resize handles, activeElement
  5351. // will be that element instead of this.dom.
  5352. if (ie) {
  5353. // If activeElement is within this.dom, and there are no other elements
  5354. // setting `contenteditable` to false in between, treat it as focused.
  5355. let node = this.root.activeElement;
  5356. if (node == this.dom)
  5357. return true;
  5358. if (!node || !this.dom.contains(node))
  5359. return false;
  5360. while (node && this.dom != node && this.dom.contains(node)) {
  5361. if (node.contentEditable == 'false')
  5362. return false;
  5363. node = node.parentElement;
  5364. }
  5365. return true;
  5366. }
  5367. return this.root.activeElement == this.dom;
  5368. }
  5369. /**
  5370. Focus the editor.
  5371. */
  5372. focus() {
  5373. this.domObserver.stop();
  5374. if (this.editable)
  5375. focusPreventScroll(this.dom);
  5376. selectionToDOM(this);
  5377. this.domObserver.start();
  5378. }
  5379. /**
  5380. Get the document root in which the editor exists. This will
  5381. usually be the top-level `document`, but might be a [shadow
  5382. DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM)
  5383. root if the editor is inside one.
  5384. */
  5385. get root() {
  5386. let cached = this._root;
  5387. if (cached == null)
  5388. for (let search = this.dom.parentNode; search; search = search.parentNode) {
  5389. if (search.nodeType == 9 || (search.nodeType == 11 && search.host)) {
  5390. if (!search.getSelection)
  5391. Object.getPrototypeOf(search).getSelection = () => search.ownerDocument.getSelection();
  5392. return this._root = search;
  5393. }
  5394. }
  5395. return cached || document;
  5396. }
  5397. /**
  5398. When an existing editor view is moved to a new document or
  5399. shadow tree, call this to make it recompute its root.
  5400. */
  5401. updateRoot() {
  5402. this._root = null;
  5403. }
  5404. /**
  5405. Given a pair of viewport coordinates, return the document
  5406. position that corresponds to them. May return null if the given
  5407. coordinates aren't inside of the editor. When an object is
  5408. returned, its `pos` property is the position nearest to the
  5409. coordinates, and its `inside` property holds the position of the
  5410. inner node that the position falls inside of, or -1 if it is at
  5411. the top level, not in any node.
  5412. */
  5413. posAtCoords(coords) {
  5414. return posAtCoords(this, coords);
  5415. }
  5416. /**
  5417. Returns the viewport rectangle at a given document position.
  5418. `left` and `right` will be the same number, as this returns a
  5419. flat cursor-ish rectangle. If the position is between two things
  5420. that aren't directly adjacent, `side` determines which element
  5421. is used. When < 0, the element before the position is used,
  5422. otherwise the element after.
  5423. */
  5424. coordsAtPos(pos, side = 1) {
  5425. return coordsAtPos(this, pos, side);
  5426. }
  5427. /**
  5428. Find the DOM position that corresponds to the given document
  5429. position. When `side` is negative, find the position as close as
  5430. possible to the content before the position. When positive,
  5431. prefer positions close to the content after the position. When
  5432. zero, prefer as shallow a position as possible.
  5433. Note that you should **not** mutate the editor's internal DOM,
  5434. only inspect it (and even that is usually not necessary).
  5435. */
  5436. domAtPos(pos, side = 0) {
  5437. return this.docView.domFromPos(pos, side);
  5438. }
  5439. /**
  5440. Find the DOM node that represents the document node after the
  5441. given position. May return `null` when the position doesn't point
  5442. in front of a node or if the node is inside an opaque node view.
  5443. This is intended to be able to call things like
  5444. `getBoundingClientRect` on that DOM node. Do **not** mutate the
  5445. editor DOM directly, or add styling this way, since that will be
  5446. immediately overriden by the editor as it redraws the node.
  5447. */
  5448. nodeDOM(pos) {
  5449. let desc = this.docView.descAt(pos);
  5450. return desc ? desc.nodeDOM : null;
  5451. }
  5452. /**
  5453. Find the document position that corresponds to a given DOM
  5454. position. (Whenever possible, it is preferable to inspect the
  5455. document structure directly, rather than poking around in the
  5456. DOM, but sometimes—for example when interpreting an event
  5457. target—you don't have a choice.)
  5458. The `bias` parameter can be used to influence which side of a DOM
  5459. node to use when the position is inside a leaf node.
  5460. */
  5461. posAtDOM(node, offset, bias = -1) {
  5462. let pos = this.docView.posFromDOM(node, offset, bias);
  5463. if (pos == null)
  5464. throw new RangeError("DOM position not inside the editor");
  5465. return pos;
  5466. }
  5467. /**
  5468. Find out whether the selection is at the end of a textblock when
  5469. moving in a given direction. When, for example, given `"left"`,
  5470. it will return true if moving left from the current cursor
  5471. position would leave that position's parent textblock. Will apply
  5472. to the view's current state by default, but it is possible to
  5473. pass a different state.
  5474. */
  5475. endOfTextblock(dir, state) {
  5476. return endOfTextblock(this, state || this.state, dir);
  5477. }
  5478. /**
  5479. Run the editor's paste logic with the given HTML string. The
  5480. `event`, if given, will be passed to the
  5481. [`handlePaste`](https://prosemirror.net/docs/ref/#view.EditorProps.handlePaste) hook.
  5482. */
  5483. pasteHTML(html, event) {
  5484. return doPaste(this, "", html, false, event || new ClipboardEvent("paste"));
  5485. }
  5486. /**
  5487. Run the editor's paste logic with the given plain-text input.
  5488. */
  5489. pasteText(text, event) {
  5490. return doPaste(this, text, null, true, event || new ClipboardEvent("paste"));
  5491. }
  5492. /**
  5493. Removes the editor from the DOM and destroys all [node
  5494. views](https://prosemirror.net/docs/ref/#view.NodeView).
  5495. */
  5496. destroy() {
  5497. if (!this.docView)
  5498. return;
  5499. destroyInput(this);
  5500. this.destroyPluginViews();
  5501. if (this.mounted) {
  5502. this.docView.update(this.state.doc, [], viewDecorations(this), this);
  5503. this.dom.textContent = "";
  5504. }
  5505. else if (this.dom.parentNode) {
  5506. this.dom.parentNode.removeChild(this.dom);
  5507. }
  5508. this.docView.destroy();
  5509. this.docView = null;
  5510. }
  5511. /**
  5512. This is true when the view has been
  5513. [destroyed](https://prosemirror.net/docs/ref/#view.EditorView.destroy) (and thus should not be
  5514. used anymore).
  5515. */
  5516. get isDestroyed() {
  5517. return this.docView == null;
  5518. }
  5519. /**
  5520. Used for testing.
  5521. */
  5522. dispatchEvent(event) {
  5523. return dispatchEvent(this, event);
  5524. }
  5525. /**
  5526. Dispatch a transaction. Will call
  5527. [`dispatchTransaction`](https://prosemirror.net/docs/ref/#view.DirectEditorProps.dispatchTransaction)
  5528. when given, and otherwise defaults to applying the transaction to
  5529. the current state and calling
  5530. [`updateState`](https://prosemirror.net/docs/ref/#view.EditorView.updateState) with the result.
  5531. This method is bound to the view instance, so that it can be
  5532. easily passed around.
  5533. */
  5534. dispatch(tr) {
  5535. let dispatchTransaction = this._props.dispatchTransaction;
  5536. if (dispatchTransaction)
  5537. dispatchTransaction.call(this, tr);
  5538. else
  5539. this.updateState(this.state.apply(tr));
  5540. }
  5541. /**
  5542. @internal
  5543. */
  5544. domSelectionRange() {
  5545. return safari && this.root.nodeType === 11 && deepActiveElement(this.dom.ownerDocument) == this.dom
  5546. ? safariShadowSelectionRange(this) : this.domSelection();
  5547. }
  5548. /**
  5549. @internal
  5550. */
  5551. domSelection() {
  5552. return this.root.getSelection();
  5553. }
  5554. }
  5555. function computeDocDeco(view) {
  5556. let attrs = Object.create(null);
  5557. attrs.class = "ProseMirror";
  5558. attrs.contenteditable = String(view.editable);
  5559. view.someProp("attributes", value => {
  5560. if (typeof value == "function")
  5561. value = value(view.state);
  5562. if (value)
  5563. for (let attr in value) {
  5564. if (attr == "class")
  5565. attrs.class += " " + value[attr];
  5566. else if (attr == "style")
  5567. attrs.style = (attrs.style ? attrs.style + ";" : "") + value[attr];
  5568. else if (!attrs[attr] && attr != "contenteditable" && attr != "nodeName")
  5569. attrs[attr] = String(value[attr]);
  5570. }
  5571. });
  5572. if (!attrs.translate)
  5573. attrs.translate = "no";
  5574. return [Decoration.node(0, view.state.doc.content.size, attrs)];
  5575. }
  5576. function updateCursorWrapper(view) {
  5577. if (view.markCursor) {
  5578. let dom = document.createElement("img");
  5579. dom.className = "ProseMirror-separator";
  5580. dom.setAttribute("mark-placeholder", "true");
  5581. dom.setAttribute("alt", "");
  5582. view.cursorWrapper = { dom, deco: Decoration.widget(view.state.selection.head, dom, { raw: true, marks: view.markCursor }) };
  5583. }
  5584. else {
  5585. view.cursorWrapper = null;
  5586. }
  5587. }
  5588. function getEditable(view) {
  5589. return !view.someProp("editable", value => value(view.state) === false);
  5590. }
  5591. function selectionContextChanged(sel1, sel2) {
  5592. let depth = Math.min(sel1.$anchor.sharedDepth(sel1.head), sel2.$anchor.sharedDepth(sel2.head));
  5593. return sel1.$anchor.start(depth) != sel2.$anchor.start(depth);
  5594. }
  5595. function buildNodeViews(view) {
  5596. let result = Object.create(null);
  5597. function add(obj) {
  5598. for (let prop in obj)
  5599. if (!Object.prototype.hasOwnProperty.call(result, prop))
  5600. result[prop] = obj[prop];
  5601. }
  5602. view.someProp("nodeViews", add);
  5603. view.someProp("markViews", add);
  5604. return result;
  5605. }
  5606. function changedNodeViews(a, b) {
  5607. let nA = 0, nB = 0;
  5608. for (let prop in a) {
  5609. if (a[prop] != b[prop])
  5610. return true;
  5611. nA++;
  5612. }
  5613. for (let _ in b)
  5614. nB++;
  5615. return nA != nB;
  5616. }
  5617. function checkStateComponent(plugin) {
  5618. if (plugin.spec.state || plugin.spec.filterTransaction || plugin.spec.appendTransaction)
  5619. throw new RangeError("Plugins passed directly to the view must not have a state component");
  5620. }
  5621. export { Decoration, DecorationSet, EditorView, __endComposition, __parseFromClipboard, __serializeForClipboard };