Develop Reference

Arabic sentence for words are reversed on datatables pdfhtml5 "pdfmake"

I have changed the default font to a font that supports arabic
The words supposed to be shown this way:
تقارير حركة الرسائل
But they are shown as
الرسائل حركة تقارير
function processDoc(doc) {
// https://pdfmake.github.io/docs/fonts/custom-fonts-client-side/
pdfMake.fonts = {
Roboto: {
normal: 'Roboto-Regular.ttf',
bold: 'Roboto-Medium.ttf',
italics: 'Roboto-Italic.ttf',
bolditalics: 'Roboto-MediumItalic.ttf'
},
scheherazade: {
normal: 'Scheherazade-Regular.ttf',
bold: 'Scheherazade-Regular.ttf',
italics: 'Scheherazade-Regular.ttf',
bolditalics: 'Scheherazade-Regular.ttf'
}
};
// modify the PDF to use a different default font:
doc.defaultStyle.font = "scheherazade";
}
$(function () {
var table = $('.data-table').DataTable({
processing: true,
serverSide: true,
ajax: {
url: "{{ route('messaage_movements.index') }}",
"method": "GET",
data: function (d) {
d.search = $('input[type="search"]').val()
}
},
dom: 'Bfrtip',
buttons: [
// {
// extend: 'pdfHtml5',
// text: 'PDF',
// } ,
'copyHtml5',
'excelHtml5',
'csvHtml5',
'print',
{
extend: 'pdfHtml5',
// download: 'open',
title: '{{__('messages.messaage_movements')}}',
customize: function ( doc ) {
processDoc(doc);
doc.content.splice( 1, 0, {
margin: [ 0, 0, 0, 12 ],
alignment: 'right',
} );
},
}
],
columns: [
{data: 'id', name: 'id'},
{data: 'message', name: 'message'},
{data: 'user_id', name: 'user_id'},
{data: 'number_massages', name: 'number_massages'},
{data: 'status', name: 'status'},
{data: 'reason', name: 'reason'},
{data: 'date_sent', name: 'date_sent'},
{
data: 'action',
name: 'action',
orderable: true,
`enter code here` searchable: true
},
]
});
});
I have followed a code like that but turned it into arabic
I don't know where to put the direction="rtl" in the code cause It's not a visible html tag
enter link description here
-----edit
The changes I've made above solved the problem of the title and the rows but not the thead.
customize: function ( doc ) {
processDoc(doc);
doc.content[0]['text'] = doc.content[0]['text'].split(' ').reverse().join(' ');
},
}
],
columns: [
{data: 'id', name: 'id'},
{data: 'message', name: 'message',targets: '_all',render: function(data, type, row) {
if (type === 'myExport') {
return data.split(' ').reverse().join(' ');
}
console.log(data);
return data;
}},

This library doesn't support rtl very well.. but you could fix this issues in table body using "render" function in columns option to reverse the content..
the problem is with your table head, because you can't customize table header content..
but I figured out a trick to solve this issue..
the idea is to create two table headers.. one reversed and hidden from the html page.. while the other is not reversed and shown in html, the library will only detect the reversed one and display it in the pdf file
to apply this just add this code to your js file..
let thead = document.getElementsByTagName('thead')[0].children[0]
const reversedHead = thead.cloneNode(true)
thead.parentNode.appendChild(reversedHead)
let headCells = reversedHead.children
Object.keys(headCells).forEach(i=>{
headCells[i].textContent = headCells[i].textContent.split(' ').reverse().join(' ')
})
reversedHead.setAttribute('hidden',"")

Disabling "italic" and "bold" features doesn't work in marked.js

I'm using marked.js to convert my text to html. I have the following code to disable bunch of commands, including header (# text), list/listItem and etc. but it doesn't disable "italic" and "bold".
Anyone here knows how to get that to work.
Thank you
const getUnfilteredContent = (content) => {
const lexer = new marked.Lexer({});
var list = [
'em',
'emStrong',
'code',
'def',
'lheading',
'fences',
'blockquote',
'html',
'heading',
'hr',
'list',
'listitem',
'paragraph',
'table',
'tablerow',
'tablecell',
'strong',
'codespan',
'br',
'del',
'link',
'image',
];
for (let i in list) {
const key = list[i];
lexer.tokenizer.rules.block[key] = { exec: function () { } }
}
return lexer.lex(content);
}
marked.parser(getUnfilteredContent(value), {})

How to implement Nav with custom heading group in shiny.fluent

I am trying to use shiny.fluent and implement one of the Nav examples from the Microsoft fluent UI documentation page. The example uses some JavaScript to apply a heading style to the group headings and I'm not sure how do apply the JavaScript in R.
Minimum example below:
library(shiny)
library(shiny.fluent)
navigation_styles <- list(
root = list(
height = "100%",
width = "30%",
boxSizing = "border-box",
border = "1px solid #eee",
overflowY = "auto"
)
)
link_groups <- list(
list(name = 'Pages',
links = list(
list(name = 'Activity'),
list(name = 'News'))),
list(name = 'More Pages',
links = list(
list(name = 'Settings'),
list(name = 'Notes')
)
)
)
shinyApp(
ui = fluidPage(
Nav(
groups = link_groups,
selectedKey = "key1",
styles = navigation_styles
)
),
server = function(input, output) {
}
)
And it looks like this. The group headings are collapsible menu items which is not what I want.
the example from Microsoft is the last example on this page. Their example code below:
import * as React from 'react';
import { Nav, INavLinkGroup } from '#fluentui/react/lib/Nav';
const navLinkGroups: INavLinkGroup[] = [
{
name: 'Pages',
links: [
{ name: 'Activity', url: 'http://msn.com', key: 'key1', target: '_blank' },
{ name: 'News', url: 'http://msn.com', key: 'key2', target: '_blank' },
],
},
{
name: 'More pages',
links: [
{ name: 'Settings', url: 'http://msn.com', key: 'key3', target: '_blank' },
{ name: 'Notes', url: 'http://msn.com', key: 'key4', target: '_blank' },
],
},
];
export const NavCustomGroupHeadersExample: React.FunctionComponent = () => {
return (
<Nav
onRenderGroupHeader={_onRenderGroupHeader}
ariaLabel="Nav example with custom group headers"
groups={navLinkGroups}
/>
);
};
function _onRenderGroupHeader(group: INavLinkGroup): JSX.Element {
return <h3>{group.name}</h3>;
}
It looks like this:
Can anyone help me implement this in shiny.fluent?
Thanks.

Gutenberg media upload in Inspect Controls

I am trying to upload the file via Media Library from Inspect Control in Gutenberg. I am using this code currently in JS :
var el = wp.element.createElement,
registerBlockType = wp.blocks.registerBlockType,
ServerSideRender = wp.components.ServerSideRender,
TextControl = wp.components.TextControl,
TextareaControl = wp.components.TextareaControl,
MediaUpload = wp.components.MediaUpload,
InspectorControls = wp.editor.InspectorControls;
And here I am registering the block type :
registerBlockType( 'myplugin/about-section', {
title: 'About Section',
icon: 'megaphone',
category: 'widgets',
edit: function( props ) {
return [
el( ServerSideRender, {
block: 'malinda/about-section',
attributes: props.attributes,
} ),
el( InspectorControls, {},
el( MediaUpload, {
label: 'Background Image',
value: props.attributes.bgimg,
// I think something need to be done here..
} ),
),
];
},
save: function() {
return null;
},
} );
But for some reason it's not working for me. In console it's giving me this error :
Error: Minified React error #130; visit
https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]=
for the full message or use the non-minified dev environment for full
errors and additional helpful warnings.
and when I click on block it says :
The editor has encountered an unexpected error.
Can anyone please help me in that?

You need add attributes field for save image link. Then you need add MediaUpload element and add callback on click. And after save value. You can integrate my code in your
decision. I am add image select to inspector controls area.
( function( editor, components, i18n, element ) {
var el = element.createElement;
var registerBlockType = wp.blocks.registerBlockType;
var InspectorControls = wp.editor.InspectorControls;
var MediaUpload = wp.editor.MediaUpload;
registerBlockType( 'designa/image-block', {
title: 'Image block',
description: 'Image block.',
icon: 'video-alt3',
category: 'common',
attributes: {
mediaURL: {
type: 'string',
source: 'attribute',
selector: 'img',
attribute: 'src',
}
},
edit: function( props ) {
var attributes = props.attributes;
var onSelectImage = function( media ) {
return props.setAttributes({
mediaURL: media.url
});
};
return [
el( InspectorControls, { key: 'inspector' },
el( components.PanelBody, {
title: 'Image block',
className: 'image-block',
initialOpen: true,
},
el( MediaUpload, {
onSelect: onSelectImage,
type: 'image',
render: function( obj ) {
return el( components.Button, {
className: 'components-icon-button image-block-btn is-button is-default is-large',
onClick: obj.open
},
el( 'svg', { className: 'dashicon dashicons-edit', width: '20', height: '20' },
el( 'path', { d: "M2.25 1h15.5c.69 0 1.25.56 1.25 1.25v15.5c0 .69-.56 1.25-1.25 1.25H2.25C1.56 19 1 18.44 1 17.75V2.25C1 1.56 1.56 1 2.25 1zM17 17V3H3v14h14zM10 6c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zm3 5s0-6 3-6v10c0 .55-.45 1-1 1H5c-.55 0-1-.45-1-1V8c2 0 3 4 3 4s1-3 3-3 3 2 3 2z" } )
),
el( 'span', {},
'Select image'
),
);
}
}),
),
)
];
},
save: function( props ) {
var attributes = props.attributes;
return (
el( 'div', {
className: props.className
},
el( 'img', {
src: attributes.mediaURL
})
)
);
},
} );
} )(
window.wp.editor,
window.wp.components,
window.wp.i18n,
window.wp.element,
);

Ext property grid with assigned values in multiselectable combos

I am trying to assign values to a multiselectable combo box in extjs property grid. When I assign some values to the field, the grid fails to render the field. How to resolve this ? Please find the code below.
Ext.create('Ext.grid.property.Grid', {
title: 'Properties Grid',
width: 400,
renderTo: Ext.getBody(),
source: {
name: "My Object",
created: Ext.Date.parse('10/15/2006', 'm/d/Y'),
timeofday: "12:00 PM",
available: false,
version: 0.01,
description: Ext.encode({
product: 'Clorox',
tagline: 'The Shinyest White!'
}),
childAccounts:['john','mike']
},
customEditors: {
timeofday: Ext.create('Ext.form.TimeField', {selectOnFocus: true}),
description: {
xtype: 'customeditorfield'
},
childAccounts:Ext.create('Ext.form.ComboBox', {store: ['john', 'mike', 'harvey'],multiSelect:true}),
},
customRenderers: {
timeofday: function( v ) {
return Ext.isDate( v ) ? Ext.Date.format( v, 'g:i A' ) : v;
}
},
propertyNames: {
name: '(name)',
created: 'Created Date',
timeofday: 'Time of Day',
available: 'Available?',
version: 'Version',
description: 'Product Description',
childAccounts: 'Child Description'
},
listeners: {
beforeedit: function( editor, e, opts ) {
if( e.record.get( 'name' )=='name' || e.record.get( 'name' )=='version' ) {
return false;
}
}
}
});

By default, only "editable" values are supported by property grid, and Sencha does not count arrays as editable. You can try to override this if you want. The limitation is introduced in Ext.grid.property.Store.getReader, where there is a function isEditableValue:
isEditableValue: function(val){
return Ext.isPrimitive(val) || Ext.isDate(val) || val === null;
}
If you change this function to allow for arrays, it seems to work, but without warranty. I used the following code for quick test:
Ext.define('', {
override: 'Ext.grid.property.Store',
getReader: function() {
var newReader = !this.reader;
this.callParent(arguments);
if(newReader) this.reader.isEditableValue = function(val) {
return Ext.isPrimitive(val) || Ext.isDate(val) || Ext.isArray(val) || val === null;
}
return this.reader;
}
});
Fiddle (Without warranty, as always)

Solution:
Your "childAccounts" config is not correct. Try to replace:
childAccounts:['john','mike']
with:
childAccounts: 'john, mike'
Notes:
Tested with ExtJS 4.2.