Giter Club home page Giter Club logo

Comments (20)

josineto avatar josineto commented on July 20, 2024

Thanks for using them, @glassdimly!

Any custom style that's not defined at reference document (kind of template in odt/docx) will open as default style (in that case, Text body). But the style probably is at the text, LibreOffice just doesn't know it. To check this, decompress the odt file (it's just a zip file), open content.xmland search for scene-sep. If it's there, the problem is lack of style on reference doc.

To accomplish this, add to your command: --reference-doc=your-styled-doc.odt, where your-styled-doc.odtis an odt where scene-sep style (and any others) is defined.

(You can use a document with text, for instance an already done document. Pandoc will grab just the styles, not the content.)

from pandoc-odt-filters.

glassdimly avatar glassdimly commented on July 20, 2024

Thanks for your response.

Nope, definitely nothing is being set.

Output in content.xml:
<text:p text:style-name="Text_20_body">* * * * *</text:p>

In fact, when I generate an rst, I see none of the raw opendoc stuff I'd expect, even after changing the following line if (FORMAT == 'odt' or FORMAT == 'docx' or FORMAT == 'rst') then and using this command:

pandoc Thinspace.html --reference-doc ~/.pandoc/ms-format.odt --lua-filter ./pandoc-odt-filters/odt-custom-styles.lua -o thinspace-pandoc3.rst

Additionally, I have created the style scene-sep in my reference doc, and I can see it in the output doc, but it is not applying to the scene separators.

Is it possible the filter is not running? I have the repo checked out at pandoc-odt-filters. Any suggestions here?

from pandoc-odt-filters.

josineto avatar josineto commented on July 20, 2024

The paragraph in question is an Horizontal Rule (<hr/> in HTML)? If this is the case, the filter doesn't process them. I'm working on this.

About raw opendoc stuff not appearing in rst conversion, it's expected. I use RawBlocks and RawInlines to do the processing, and these pandoc elements receive a type argument (in odt case, opendocument). So, these elements are processed only at the correct type; in all others, they are ignored (see Pandoc manual on this).

from pandoc-odt-filters.

josineto avatar josineto commented on July 20, 2024

I've corrected this on odt-custom-styles.lua, and changed README accordingly. @glassdimly please test if that change works for you.

from pandoc-odt-filters.

glassdimly avatar glassdimly commented on July 20, 2024

@jzeneto,

The paragraph in question is/was not a hr. The markup is like so:
<div custom-style="scene-sep" class="scene-sep" style="text-align: center;">* * * * *</div>

I'm having another pass at this so I'll update this thread.

from pandoc-odt-filters.

glassdimly avatar glassdimly commented on July 20, 2024

Alright, I just can't get this to work at all. Lua is kind of a pain because it doesn't properly log errors or output anywhere.

I'm going to post my files so you can help troubleshoot, if that's of interest to you.

Again, thanks for you help--it's clear you put a lot of work into this plugin.

pandoc-troubleshooting.zip

My command:

pandoc Thinspace.html --reference-doc custom-reference.odt --lua-filter pandoc-odt-filters/odt-custom-styles.lua -o thinspace.odt --log=log.log

There should be at least two custom styles imported, scenesep and qr-img, and while those styles do exist in the output odt doc, the text does not get styled.

I'm going to keep working on this until I get custom styles outputted.

from pandoc-odt-filters.

glassdimly avatar glassdimly commented on July 20, 2024

Hey, I figured this out. Your code requires a nested element.

Doesn't work:
<div class="scenesep" custom-style="scenesep">* * * * *</div>

Works:
<div class="scenesep" custom-style="scenesep"><p>* * * * *</p></div>

It's because of this:

div = pandoc.walk_block(div, getFilter(customStyle))

from pandoc-odt-filters.

glassdimly avatar glassdimly commented on July 20, 2024

Yeah, I thought this was working. I saw the output. But I can't replicate it. I have no idea why.

from pandoc-odt-filters.

josineto avatar josineto commented on July 20, 2024

Ok, I've debugged a while with your files, and here's the problem: Pandoc uses Plain element with any div content not nested in a paragraph tag. As odt-custom-styles.lua has ignored Plain elements, your div contents were ignored, and styling was by-passed (I wrote the filter using only markdown -> odt conversion, and Plain is used in markdown only in list items and table cells, which falls out of the filter scope). Also, you put the styles as div classes, and the filter didn't use classes.

The Plain elements are converted to Paras (paragraph elements) by Pandoc, so I made the filter process Plain, using the same rules of Para. This worked fine for the first (asterisks) and third (link) div, but the second one, a figure, is not parsed because, as the filter description says, figures/images are not currently supported.

I'll commit this change, but you'll have to remove the class of the div with image (qr-wrapper class) for the change work properly. And, for the class/custom-style problem, I put a local variable, useClassAsCustomStyle (default true) at the beginning of filter, that turns first class of element into custom-style if no custom-style attribute is set --- just for div's, spans and headers, of course. I turned this configurable because use of class as custom-style is currently under discussion (see jgm/pandoc#2106).

from pandoc-odt-filters.

glassdimly avatar glassdimly commented on July 20, 2024

Thank you, @jzeneto!

I can wrangle my markup into whatever format is required.

from pandoc-odt-filters.

josineto avatar josineto commented on July 20, 2024

Sorry, but that code is not semantic: it's a paragraph (block element) with a division inside (another block element), with a paragraph inside (another block element). Pandoc's Para doesn't support block elements inside of it; it's in fact the opposite way that is supported: Para inside Div.

The commit I've made was tested against files in the zip you uploaded (and against test files of this repository), and I found only the image-problem. Can you use the syntax of files in that zip? That is:

<div class="scenesep">* * * * *</div>

If you want a division inside a paragraph, consider <span>. It's more semantic than <div> in this case.

from pandoc-odt-filters.

glassdimly avatar glassdimly commented on July 20, 2024

Alright, so to explain the confusion from before: it would seem that the following markup is/was working even before your commit:

<p><div class="scenesep" custom-style="scenesep"><p>* * * * *</p></div></p>

The reason why I got a false positive earlier was because I had an opening <p> tag that never got closed.

That is to say, what is working is: p -> div -> p, and the innermost p tag was the styles.

from pandoc-odt-filters.

glassdimly avatar glassdimly commented on July 20, 2024

Also, using the lua inspect library made debugging much easier: https://github.com/kikito/inspect.lua

from pandoc-odt-filters.

josineto avatar josineto commented on July 20, 2024

Thanks for the tip, I'll look for using that lib! The paragraphs got styled?

from pandoc-odt-filters.

josineto avatar josineto commented on July 20, 2024

As Images can't be supported by the filter (see below), if you confirm that first and third divs of your files get styled, I'll close this issue, ok?

Why the filter can't process Images?

Well, the only way I found to make custom styles work was turning all inner elements of a styled block into pure ODT code (but wrapped by Str elements), getting all this inner content as a string (with pandoc.utils.stringify()) and then turning the whole block into a RawBlock with format equal to opendocument, and text equal to that string.

This works (relatively) fine for markup that can be printed by pandoc.utils.stringify(). But Images, obviously, cannot. I can create the ODT code as a string, and put the path of the image in the code, but this would generate an ODT with the image not embedded, which is very fragile if you (or other users) don't use a consistent workflow.

To better understand why inner elements are processed before outer elements, remember the Lua filter run order:

Inlines → Blocks → Meta → Pandoc.

from pandoc-odt-filters.

glassdimly avatar glassdimly commented on July 20, 2024

My divs are styled with your commit, and plain divs like so work fine:

<div class="scenesep" custom-style="scenesep">* * * * *</div>

On the matter of images, I understand the problem. I'm going to think on it.

from pandoc-odt-filters.

josineto avatar josineto commented on July 20, 2024

Good!! Sorry if I was a little unpolite before, my English is not so good.

I hope that custom styles gonna work natively with Pandoc soon.

from pandoc-odt-filters.

josineto avatar josineto commented on July 20, 2024

Just one more thing: with the commits, you don't have to especify custom-style attribute in div, just class (unless you want that custom-style be different from class; the former takes precedence with the filter). For this, keep the corresponding variable in filter equals true (I think it's useClassAsCustomStyle, but forgot the exact name).

from pandoc-odt-filters.

glassdimly avatar glassdimly commented on July 20, 2024

No worries. Yeah, the HTML was unsemantic, I was just posting to show it was working.

from pandoc-odt-filters.

glassdimly avatar glassdimly commented on July 20, 2024

Whelp. I figured out how to wrap my images in custom styles.

It's a little unrelated, but I wanted to report back.

First I tried the php pandoc filters, because I mostly code in PHP. But the filter was sloooow, taking hours, so I aborted.

Then I used node-pandoc-filters, which took seconds. First I base64ed my images with gulp. Then, I stripped the preceding formatting and used the <office:binary-data> tag, then made the following script, executed with the --filter styles.js option:

#!/usr/bin/env node

var pandoc = require('pandoc-filter');

function action(type,value,format,meta) {

  if (type === 'Para') {
    if (value[0] !== undefined && value[0].hasOwnProperty('t') && value[0].t === 'Image'
      && value[0].hasOwnProperty('c') && value[0].c[2] !== undefined && value[0].c[2][0] !== undefined && typeof value[0].c[2][0] === 'string'
    ) {
      var src = value[0].c[2][0].replace('data:image/png;base64,', '');
      if (src) {
        return pandoc.RawBlock('opendocument', `<text:p text:style-name="qr-wrapper"><draw:frame draw:name="img1" svg:width="150.0pt" svg:height="150.0pt"><draw:image xlink:type="simple" xlink:show="embed" xlink:actuate="onLoad">
          <office:binary-data>
          ${src}
          </office:binary-data></draw:image></draw:frame></text:p>`);
      }

    }
  }
}

pandoc.stdio(action);

Yeah, obviously not something that can be contributed back.

from pandoc-odt-filters.

Related Issues (4)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.