Trumbowyg: Angular routing and svgPath

[mysuf]

Hi, I am trying to run trumbowyg within angularjs app and I found issue that makes it unusable.

This is code from trumbowyg.js that do that:
t.svgPath = !!t.doc.querySelector('base') ? window.location.href.split('#')[0] : '';

angularjs html5Mode requires base tag so window.location is used for svgPath, but it is not accurate as angulajs has its own $location. It brakes loading svg icons.

What is the purpose of this statement? Iframe?
Thank you

[Alex-D]

Maybe read the doc?
https://alex-d.github.io/Trumbowyg/documentation/#common-issues

[mysuf]

@Alex-D Ofc I did before opened this ticket and there is not an answer to my question. I could miss something so can you please refer to part where it solves this issue? I hacked it via tbwinit event and rewrote xlink:href of all use tags, but it is really ugly solution.. Thanks..

[Alex-D]

https://alex-d.github.io/Trumbowyg/documentation/#svg-icons

You can set an URL instead of automatic detection.

If it does not works, you can inject icons into your HTML. Check the doc, really...

[mysuf]

I think that you dont understand the issue, rly. Just look at row I mentioned above. There is nothing except deleting base tag that could workaround this behaviour. Injecting cant work because trumbowyg create wrong xlinks while building btnPanel. Doc is useless in this case. Please try to investigate issue little more before making judgements.. It is why I asked what is the purpose of that expression..

[Alex-D]

OK, sorry, I understand the problem, but you were unclear.

Did you think that can do the job:

t.svgPath = options.svgBasePath || !!t.doc.querySelector('base') ? window.location.href.split('#')[0] : '';

svgBasePath should be your base path.

[mysuf]

@Alex-D EDIT: it cant work. :/ when I want xlink looks like xlink:href="#trumbowyg-whatever" with base tag on page, it cant be done because svgBasePath="" is evaluated as false.

[mysuf]

Better solution would be:
options.svgBasePath = !!t.doc.querySelector('base') ? window.location.href.split('#')[0] : ''; as default and then you can use options.svgBasePath directly in building btnPanel (skip reusing svgPath)

[mysuf]

Eh. DefaultOptions declaration is outside of t scope so my last post cant work either.

[mysuf]

Please could you provide t.doc.querySelector('base') usecase? I don't know any. svg IDs are created by editor on same page so it should be always in format xlink:href="#trumbowyg-anysvg". Isnt that same as xlink:href="currenturl#trumbowyg-anysvg"? So atm I am up to remove baseSvgPath..

[Alex-D]

It's usefull when you have the html5mode disabled I guess.

[mysuf]

Only html5mode=true requires base tag. According to this issue, using absolute url is only needed to workaround svg object property values in format of url(#some-id) like masks, clip-paths etc. I tried to find any "url(" in icons.svg and found none.

[Alex-D]

Check this issue; https://github.com/Alex-D/Trumbowyg/issues/256

[mysuf]

Oh. So that issue is related to Firefox/Safari while Chrome works. Ok. It means that also my current hotfix breaks it in these browsers. Even if I like this editor, I give up and rather use some angular-native editor. As nobody else faced this issue, I think that you can feel free to close it. Thanks for your time.

[LosD]

This probably won't fix anything for you, since you seem to refer to the old AngularJS (1), while this is for Angular (2+), but since others might run into it, here's what I did for Angular (with Angular CLI):
To get the script working in the first place, it needs to go into .angular-cli.json script section, along with JQuery and plugins:

      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/trumbowyg/dist/trumbowyg.min.js",
        "../node_modules/trumbowyg/dist/plugins/pasteimage/trumbowyg.pasteimage.min.js"
      ],

To get the CSS to a known directory, you need to make sure that the CLI packages it into the app, on a known location, using the assets section (assets and favicon.ico are there by defaults. I left them in for context):

      "assets": [
        "assets",
        "favicon.ico",
        {
          "glob": "icons.svg",
          "input": "../node_modules/trumbowyg/dist/ui",
          "output": "./dist/"
        }
      ],

(One could probably get away with just copying it to assets, but I preferred leaving it in place)

Then, in main.ts, set the trumbowyg svgPath: $.trumbowyg.svgPath = 'dist/icons.svg';

Optional: This doesn't really work for me, since I have a weird issue where stuff breaks when using JQuery typings with AOT, so I had to go back to any for jQuery plugins, but I made a TypeScript Typings file for Trumbowyg that I believe is reasonably correct:
https://gist.github.com/LosD/7d8b7d0c77be2cb92f4b309f1a3353b8

@Alex-D If you know anything about TypeScript, I'd love a review of the typings for correctness, then I can submit them to DefinitelyTyped, so TypeScript users has the typed API (one thing I know I should probably fix, is that only the JQuery interface is in the public namespace).