/**
* @output wp-admin/js/editor.js
*/
window.wp = window.wp || {};
( function( $, wp ) {
wp.editor = wp.editor || {};
/**
* Utility functions for the editor.
*
* @since 2.5.0
*/
function SwitchEditors() {
var tinymce, $$,
exports = {};
function init() {
if ( ! tinymce && window.tinymce ) {
tinymce = window.tinymce;
$$ = tinymce.$;
/**
* Handles onclick events for the Visual/Code tabs.
*
* @since 4.3.0
*
* @return {void}
*/
$$( document ).on( 'click', function( event ) {
var id, mode,
target = $$( event.target );
if ( target.hasClass( 'wp-switch-editor' ) ) {
id = target.attr( 'data-wp-editor-id' );
mode = target.hasClass( 'switch-tmce' ) ? 'tmce' : 'html';
switchEditor( id, mode );
}
});
}
}
/**
* Returns the height of the editor toolbar(s) in px.
*
* @since 3.9.0
*
* @param {Object} editor The TinyMCE editor.
* @return {number} If the height is between 10 and 200 return the height,
* else return 30.
*/
function getToolbarHeight( editor ) {
var node = $$( '.mce-toolbar-grp', editor.getContainer() )[0],
height = node && node.clientHeight;
if ( height && height > 10 && height < 200 ) {
return parseInt( height, 10 );
}
return 30;
}
/**
* Switches the editor between Visual and Code mode.
*
* @since 2.5.0
*
* @memberof switchEditors
*
* @param {string} id The id of the editor you want to change the editor mode for. Default: `content`.
* @param {string} mode The mode you want to switch to. Default: `toggle`.
* @return {void}
*/
function switchEditor( id, mode ) {
id = id || 'content';
mode = mode || 'toggle';
var editorHeight, toolbarHeight, iframe,
editor = tinymce.get( id ),
wrap = $$( '#wp-' + id + '-wrap' ),
htmlSwitch = wrap.find( '.switch-tmce' ),
tmceSwitch = wrap.find( '.switch-html' ),
$textarea = $$( '#' + id ),
textarea = $textarea[0];
if ( 'toggle' === mode ) {
if ( editor && ! editor.isHidden() ) {
mode = 'html';
} else {
mode = 'tmce';
}
}
if ( 'tmce' === mode || 'tinymce' === mode ) {
// If the editor is visible we are already in `tinymce` mode.
if ( editor && ! editor.isHidden() ) {
return false;
}
// Insert closing tags for any open tags in QuickTags.
if ( typeof( window.QTags ) !== 'undefined' ) {
window.QTags.closeAllTags( id );
}
editorHeight = parseInt( textarea.style.height, 10 ) || 0;
addHTMLBookmarkInTextAreaContent( $textarea );
if ( editor ) {
editor.show();
// No point to resize the iframe in iOS.
if ( ! tinymce.Env.iOS && editorHeight ) {
toolbarHeight = getToolbarHeight( editor );
editorHeight = editorHeight - toolbarHeight + 14;
// Sane limit for the editor height.
if ( editorHeight > 50 && editorHeight < 5000 ) {
editor.theme.resizeTo( null, editorHeight );
}
}
focusHTMLBookmarkInVisualEditor( editor );
} else {
tinymce.init( window.tinyMCEPreInit.mceInit[ id ] );
}
wrap.removeClass( 'html-active' ).addClass( 'tmce-active' );
tmceSwitch.attr( 'aria-pressed', false );
htmlSwitch.attr( 'aria-pressed', true );
$textarea.attr( 'aria-hidden', true );
window.setUserSetting( 'editor', 'tinymce' );
} else if ( 'html' === mode ) {
// If the editor is hidden (Quicktags is shown) we don't need to switch.
if ( editor && editor.isHidden() ) {
return false;
}
if ( editor ) {
// Don't resize the textarea in iOS.
// The iframe is forced to 100% height there, we shouldn't match it.
if ( ! tinymce.Env.iOS ) {
iframe = editor.iframeElement;
editorHeight = iframe ? parseInt( iframe.style.height, 10 ) : 0;
if ( editorHeight ) {
toolbarHeight = getToolbarHeight( editor );
editorHeight = editorHeight + toolbarHeight - 14;
// Sane limit for the textarea height.
if ( editorHeight > 50 && editorHeight < 5000 ) {
textarea.style.height = editorHeight + 'px';
}
}
}
var selectionRange = null;
selectionRange = findBookmarkedPosition( editor );
editor.hide();
if ( selectionRange ) {
selectTextInTextArea( editor, selectionRange );
}
} else {
// There is probably a JS error on the page.
// The TinyMCE editor instance doesn't exist. Show the textarea.
$textarea.css({ 'display': '', 'visibility': '' });
}
wrap.removeClass( 'tmce-active' ).addClass( 'html-active' );
tmceSwitch.attr( 'aria-pressed', true );
htmlSwitch.attr( 'aria-pressed', false );
$textarea.attr( 'aria-hidden', false );
window.setUserSetting( 'editor', 'html' );
}
}
/**
* Checks if a cursor is inside an HTML tag or comment.
*
* In order to prevent breaking HTML tags when selecting text, the cursor
* must be moved to either the start or end of the tag.
*
* This will prevent the selection marker to be inserted in the middle of an HTML tag.
*
* This function gives information whether the cursor is inside a tag or not, as well as
* the tag type, if it is a closing tag and check if the HTML tag is inside a shortcode tag,
* e.g. `[caption]<img.../>..`.
*
* @param {string} content The test content where the cursor is.
* @param {number} cursorPosition The cursor position inside the content.
*
* @return {(null|Object)} Null if cursor is not in a tag, Object if the cursor is inside a tag.
*/
function getContainingTagInfo( content, cursorPosition ) {
var lastLtPos = content.lastIndexOf( '<', cursorPosition - 1 ),
lastGtPos = content.lastIndexOf( '>', cursorPosition );
if ( lastLtPos > lastGtPos || content.substr( cursorPosition, 1 ) === '>' ) {
// Find what the tag is.
var tagContent = content.substr( lastLtPos ),
tagMatch = tagContent.match( /<\s*(\/)?(\w+|\!-{2}.*-{2})/ );
if ( ! tagMatch ) {
return null;
}
var tagType = tagMatch[2],
closingGt = tagContent.indexOf( '>' );
return {
ltPos: lastLtPos,
gtPos: lastLtPos + closingGt + 1, // Offset by one to get the position _after_ the character.
tagType: tagType,
isClosingTag: !! tagMatch[1]
};
}
return null;
}
/**
* Checks if the cursor is inside a shortcode
*
* If the cursor is inside a shortcode wrapping tag, e.g. `[caption]` it's better to
* move the selection marker to before or after the shortcode.
*
* For example `[caption]` rewrites/removes anything that's between the `[caption]` tag and the
* `<img/>` tag inside.
*
* `[caption]<span>ThisIsGone</span><img .../>[caption]`
*
* Moving the selection to before or after the short code is better, since it allows to select
* something, instead of just losing focus and going to the start of the content.
*
* @param {string} content The text content to check against.
* @param {number} cursorPosition The cursor position to check.
*
* @return {(undefined|Object)} Undefined if the cursor is not wrapped in a shortcode tag.
* Information about the wrapping shortcode tag if it's wrapped in one.
*/
function getShortcodeWrapperInfo( content, cursorPosition ) {
var contentShortcodes = getShortCodePositionsInText( content );
for ( var i = 0; i < contentShortcodes.length; i++ ) {
var element = contentShortcodes[ i ];
if ( cursorPosition >= element.startIndex && cursorPosition <= element.endIndex ) {
return element;
}
}
}
/**
* Gets a list of unique shortcodes or shortcode-lookalikes in the content.
*
* @param {string} content The content we want to scan for shortcodes.
*/
function getShortcodesInText( content ) {
var shortcodes = content.match( /\[+([\w_-])+/g ),
result = [];
if ( shortcodes ) {
for ( var i = 0; i < shortcodes.length; i++ ) {
var shortcode = shortcodes[ i ].replace( /^\[+/g, '' );
if ( result.indexOf( shortcode ) === -1 ) {
result.push( shortcode );
}
}
}
return result;
}
/**
* Gets all shortcodes and their positions in the content
*
* This function returns all the shortcodes that could be found in the textarea content
* along with their character positions and boundaries.
*
* This is used to check if the selection cursor is inside the boundaries of a shortcode
* and move it accordingly, to avoid breakage.
*
* @link adjustTextAreaSelectionCursors
*
* The information can also be used in other cases when we need to lookup shortcode data,
* as it's already structured!
*
* @param {string} content The content we want to scan for shortcodes
*/
function getShortCodePositionsInText( content ) {
var allShortcodes = getShortcodesInText( content ), shortcodeInfo;
if ( allShortcodes.length === 0 ) {
return [];
}
var shortcodeDetailsRegexp = wp.shortcode.regexp( allShortcodes.join( '|' ) ),
shortcodeMatch, // Define local scope for the variable to be used in the loop below.
shortcodesDetails = [];
while ( shortcodeMatch = shortcodeDetailsRegexp.exec( content ) ) {
/**
* Check if the shortcode should be shown as plain text.
*
* This corresponds to the [[shortcode]] syntax, which doesn't parse the shortcode
* and just shows it as text.
*/
var showAsPlainText = shortcodeMatch[1] === '[';
shortcodeInfo = {
shortcodeName: shortcodeMatch[2],
showAsPlainText: showAsPlainText,
startIndex: shortcodeMatch.index,
endIndex: shortcodeMatch.index + shortcodeMatch[0].length,
length: shortcodeMatch[0].length
};
shortcodesDetails.push( shortcodeInfo );
}
/**
* Get all URL matches, and treat them as embeds.
*
* Since there isn't a good way to detect if a URL by itself on a line is a previewable
* object, it's best to treat all of them as such.
*
* This means that the selection will capture the whole URL, in a similar way shrotcodes
* are treated.
*/
var urlRegexp = new RegExp(
'(^|[\\n\\r][\\n\\r]|<p>)(https?:\\/\\/[^\s"]+?)(<\\/p>\s*|[\\n\\r][\\n\\r]|$)', 'gi'
);
while ( shortcodeMatch = urlRegexp.exec( content ) ) {
shortcodeInfo = {
shortcodeName: 'url',
showAsPlainText: false,
startIndex: shortcodeMatch.index,
endIndex: shortcodeMatch.index + shortcodeMatch[ 0 ].length,
length: shortcodeMatch[ 0 ].length,
urlAtStartOfContent: shortcodeMatch[ 1 ] === '',
urlAtEndOfContent: shortcodeMatch[ 3 ] === ''
};
shortcodesDetails.push( shortcodeInfo );
}
return shortcodesDetails;
}
/**
* Generate a cursor marker element to be inserted in the content.
*
* `span` seems to be the least destructive element that can be used.
*
* Using DomQuery syntax to create it, since it's used as both text and as a DOM element.
*
* @param {Object} domLib DOM library instance.
* @param {string} content The content to insert into the cursor marker element.
*/
function getCursorMarkerSpan( domLib, content ) {
return domLib( '<span>' ).css( {
display: 'inline-block',
width: 0,
overflow: 'hidden',
'line-height': 0
} )
.html( content ? content : '' );
}
/**
* Gets adjusted selection cursor positions according to HTML tags, comments, and shortcodes.
*
* Shortcodes and HTML codes are a bit of a special case when selecting, since they may render
* content in Visual mode. If we insert selection markers somewhere inside them, it's really possible
* to break the syntax and render the HTML tag or shortcode broken.
*
* @link getShortcodeWrapperInfo
*
* @param {string} content Textarea content that the cursors are in
* @param {{cursorStart: number, cursorEnd: number}} cursorPositions Cursor start and end positions
*
* @return {{cursorStart: number, cursorEnd: number}}
*/
function adjustTextAreaSelectionCursors( content, cursorPositions ) {
var voidElements = [
'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input',
'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr'
];
var cursorStart = cursorPositions.cursorStart,
cursorEnd = cursorPositions.cursorEnd,
// Check if the cursor is in a tag and if so, adjust it.
isCursorStartInTag = getContainingTagInfo( content, cursorStart );
if ( isCursorStartInTag ) {
/**
* Only move to the start of the HTML tag (to select the whole element) if the tag
* is part of the voidElements list above.
*
* This list includes tags that are self-contained and don't need a closing tag, according to the
* HTML5 specification.
*
* This is done in order to make selection of text a bit more consistent when selecting text in
* `<p>` tags or such.
*
* In cases where the tag is not a void element, the cursor is put to the end of the tag,
* so it's either between the opening and closing tag elements or after the closing tag.
*/
if ( voidElements.indexOf( isCursorStartInTag.tagType ) !== -1 ) {
cursorStart = isCursorStartInTag.ltPos;
} else {
cursorStart = isCursorStartInTag.gtPos;
}
}
var isCursorEndInTag = getContainingTagInfo( content, cursorEnd );
if ( isCursorEndInTag ) {
cursorEnd = isCursorEndInTag.gtPos;
}
var isCursorStartInShortcode = getShortcodeWrapperInfo( content, cursorStart );
if ( isCursorStartInShortcode && ! isCursorStartInShortcode.showAsPlainText ) {
/**
* If a URL is at the start or the end of the content,
* the selection doesn't work, because it inserts a marker in the text,
* which breaks the embedURL detection.
*
* The best way to avoid that and not modify the user content is to
* adjust the cursor to either after or before URL.
*/
if ( isCursorStartInShortcode.urlAtStartOfContent ) {
cursorStart = isCursorStartInShortcode.endIndex;
} else {
cursorStart = isCursorStartInShortcode.startIndex;
}
}
var isCursorEndInShortcode = getShortcodeWrapperInfo( content, cursorEnd );
if ( isCursorEndInShortcode && ! isCursorEndInShortcode.showAsPlainText ) {
if ( isCursorEndInShortcode.urlAtEndOfContent ) {
cursorEnd = isCursorEndInShortcode.startIndex;
} else {
cursorEnd = isCursorEndInShortcode.endIndex;
}
}
return {
cursorStart: cursorStart,
cursorEnd: cursorEnd
};
}
/**
* Adds text selection markers in the editor textarea.
*
* Adds selection markers in the content of the editor `textarea`.
* The method directly manipulates the `textarea` content, to allow TinyMCE plugins
* to run after the markers are added.
*
* @param {Object} $textarea TinyMCE's textarea wrapped as a DomQuery object
*/
function addHTMLBookmarkInTextAreaContent( $textarea ) {
if ( ! $textarea || ! $textarea.length ) {
// If no valid $textarea object is provided, there's nothing we can do.
return;
}
var textArea = $textarea[0],
textAreaContent = textArea.value,
adjustedCursorPositions = adjustTextAreaSelectionCursors( textAreaContent, {
cursorStart: textArea.selectionStart,
cursorEnd: textArea.selectionEnd
} ),
htmlModeCursorStartPosition = adjustedCursorPositions.cursorStart,
htmlModeCursorEndPosition = adjustedCursorPositions.cursorEnd,
mode = htmlModeCursorStartPosition !== htmlModeCursorEndPosition ? 'range' : 'single',
selectedText = null,
cursorMarkerSkeleton = getCursorMarkerSpan( $$, '' ).attr( 'data-mce-type','bookmark' );
if ( mode === 'range' ) {
var markedText = textArea.value.slice( htmlModeCursorStartPosition, htmlModeCursorEndPosition ),
bookMarkEnd = cursorMarkerSkeleton.clone().addClass( 'mce_SELRES_end' );
selectedText = [
markedText,
bookMarkEnd[0].outerHTML
].join( '' );
}
textArea.value = [
textArea.value.slice( 0, htmlModeCursorStartPosition ), // Text until the cursor/selection position.
cursorMarkerSkeleton.clone() // Cursor/selection start marker.
.addClass( 'mce_SELRES_start' )[0].outerHTML,
selectedText, // Selected text with end cursor/position marker.
textArea.value.slice( htmlModeCursorEndPosition ) // Text from last cursor/selection position to end.
].join( '' );
}
/**
* Focuses the selection markers in Visual mode.
*
* The method checks for existing selection markers inside the editor DOM (Visual mode)
* and create a selection between the two nodes using the DOM `createRange` selection API.
*
* If there is only a single node, select only the single node through TinyMCE's selection API
*
* @param {Object} editor TinyMCE editor instance.
*/
function focusHTMLBookmarkInVisualEditor( editor ) {
var startNode = editor.$( '.mce_SELRES_start' ).attr( 'data-mce-bogus', 1 ),
endNode = editor.$( '.mce_SELRES_end' ).attr( 'data-mce-bogus', 1 );
if ( startNode.length ) {
editor.focus();
if ( ! endNode.length ) {
editor.selection.select( startNode[0] );
} else {
var selection = editor.getDoc().createRange();
selection.setStartAfter( startNode[0] );
selection.setEndBefore( endNode[0] );
editor.selection.setRng( selection );
}
}
scrollVisualModeToStartElement( editor, startNode );
removeSelectionMarker( startNode );
removeSelectionMarker( endNode );
editor.save();
}
/**
* Removes selection marker and the parent node if it is an empty paragraph.
*
* By default TinyMCE wraps loose inline tags in a `<p>`.
* When removing selection markers an empty `<p>` may be left behind, remove it.
*
* @param {Object} $marker The marker to be removed from the editor DOM, wrapped in an instance of `editor.$`
*/
function removeSelectionMarker( $marker ) {
var $markerParent = $marker.parent();
$marker.remove();
//Remove empty paragraph left over after removing the marker.
if ( $markerParent.is( 'p' ) && ! $markerParent.children().length && ! $markerParent.text() ) {
$markerParent.remove();
}
}
/**
* Scrolls the content to place the selected element in the center of the screen.
*
* Takes an element, that is usually the selection start element, selected in
* `focusHTMLBookmarkInVisualEditor()` and scrolls the screen so the element appears roughly
* in the middle of the screen.
*
* I order to achieve the proper positioning, the editor media bar and toolbar are subtracted
* from the window height, to get the proper viewport window, that the user sees.
*
* @param {Object} editor TinyMCE editor instance.
* @param {Object} element HTMLElement that should be scrolled into view.
*/
function scrollVisualModeToStartElement( editor, element ) {
var elementTop = editor.$( element ).offset().top,
TinyMCEContentAreaTop = editor.$( editor.getContentAreaContainer() ).offset().top,
toolbarHeight = getToolbarHeight( editor ),
edTools = $( '#wp-content-editor-tools' ),
edToolsHeight = 0,
edToolsOffsetTop = 0,
$scrollArea;
if ( edTools.length ) {
edToolsHeight = edTools.height();
edToolsOffsetTop = edTools.offset().top;
}
var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
selectionPosition = TinyMCEContentAreaTop + elementTop,
visibleAreaHeight = windowHeight - ( edToolsHeight + toolbarHeight );
// There's no need to scroll if the selection is inside the visible area.
if ( selectionPosition < visibleAreaHeight ) {
return;
}
/**
* The minimum scroll height should be to the top of the editor, to offer a consistent
* experience.
*
* In order to find the top of the editor, we calculate the offset of `#wp-content-editor-tools` and
* subtracting the height. This gives the scroll position where the top of the editor tools aligns with
* the top of the viewport (under the Master Bar)
*/
var adjustedScroll;
if ( editor.settings.wp_autoresize_on ) {
$scrollArea = $( 'html,body' );
adjustedScroll = Math.max( selectionPosition - visibleAreaHeight / 2, edToolsOffsetTop - edToolsHeight );
} else {
$scrollArea = $( editor.contentDocument ).find( 'html,body' );
adjustedScroll = elementTop;
}
$scrollArea.animate( {
scrollTop: parseInt( adjustedScroll, 10 )
}, 100 );
}
/**
* This method was extracted from the `SaveContent` hook in
* `wp-includes/js/tinymce/plugins/wordpress/plugin.js`.
*
* It's needed here, since the method changes the content a bit, which confuses the cursor position.
*
* @param {Object} event TinyMCE event object.
*/
function fixTextAreaContent( event ) {
// Keep empty paragraphs :(
event.content = event.content.replace( /<p>(?:<br ?\/?>|\u00a0|\uFEFF| )*<\/p>/g, '<p> </p>' );
}
/**
* Finds the current selection position in the Visual editor.
*
* Find the current selection in the Visual editor by inserting marker elements at the start
* and end of the selection.
*
* Uses the standard DOM selection API to achieve that goal.
*
* Check the notes in the comments in the code below for more information on some gotchas
* and why this solution was chosen.
*
* @param {Object} editor The editor where we must find the selection.
* @return {(null|Object)} The selection range position in the editor.
*/
function findBookmarkedPosition( editor ) {
// Get the TinyMCE `window` reference, since we need to access the raw selection.
var TinyMCEWindow = editor.getWin(),
selection = TinyMCEWindow.getSelection();
if ( ! selection || selection.rangeCount < 1 ) {
// no selection, no need to continue.
return;
}
/**
* The ID is used to avoid replacing user generated content, that may coincide with the
* format specified below.
* @type {string}
*/
var selectionID = 'SELRES_' + Math.random();
/**
* Create two marker elements that will be used to mark the start and the end of the range.
*
* The elements have hardcoded style that makes them invisible. This is done to avoid seeing
* random content flickering in the editor when switching between modes.
*/
var spanSkeleton = getCursorMarkerSpan( editor.$, selectionID ),
startElement = spanSkeleton.clone().addClass( 'mce_SELRES_start' ),
endElement = spanSkeleton.clone().addClass( 'mce_SELRES_end' );
/**
* Inspired by:
* @link https://stackoverflow.com/a/17497803/153310
*
* Why do it this way and not with TinyMCE's bookmarks?
*
* TinyMCE's bookmarks are very nice when working with selections and positions, BUT
* there is no way to determine the precise position of the bookmark when switching modes, since
* TinyMCE does some serialization of the content, to fix things like shortcodes, run plugins, prettify
* HTML code and so on. In this process, the bookmark markup gets lost.
*
* If we decide to hook right after the bookmark is added, we can see where the bookmark is in the raw HTML
* in TinyMCE. Unfortunately this state is before the serialization, so any visual markup in the content will
* throw off the positioning.
*
* To avoid this, we insert two custom `span`s that will serve as the markers at the beginning and end of the
* selection.
*
* Why not use TinyMCE's selection API or the DOM API to wrap the contents? Because if we do that, this creates
* a new node, which is inserted in the dom. Now this will be fine, if we worked with fixed selections to
* full nodes. Unfortunately in our case, the user can select whatever they like, which means that the
* selection may start in the middle of one node and end in the middle of a completely different one. If we
* wrap the selection in another node, this will create artifacts in the content.
*
* Using the method below, we insert the custom `span` nodes at the start and at the end of the selection.
* This helps us not break the content and also gives us the option to work with multi-node selections without
* breaking the markup.
*/
var range = selection.getRangeAt( 0 ),
startNode = range.startContainer,
startOffset = range.startOffset,
boundaryRange = range.cloneRange();
/**
* If the selection is on a shortcode with Live View, TinyMCE creates a bogus markup,
* which we have to account for.
*/
if ( editor.$( startNode ).parents( '.mce-offscreen-selection' ).length > 0 ) {
startNode = editor.$( '[data-mce-selected]' )[0];
/**
* Marking the start and end element with `data-mce-object-selection` helps
* discern when the selected object is a Live Preview selection.
*
* This way we can adjust the selection to properly select only the content, ignoring
* whitespace inserted around the selected object by the Editor.
*/
startElement.attr( 'data-mce-object-selection', 'true' );
endElement.attr( 'data-mce-object-selection', 'true' );
editor.$( startNode ).before( startElement[0] );
editor.$( startNode ).after( endElement[0] );
} else {
boundaryRange.collapse( false );
boundaryRange.insertNode( endElement[0] );
boundaryRange.setStart( startNode, startOffset );
boundaryRange.collapse( true );
boundaryRange.insertNode( startElement[0] );
range.setStartAfter( startElement[0] );
range.setEndBefore( endElement[0] );
selection.removeAllRanges();
selection.addRange( range );
}
/**
* Now the editor's content has the start/end nodes.
*
* Unfortunately the content goes through some more changes after this step, before it gets inserted
* in the `textarea`. This means that we have to do some minor cleanup on our own here.
*/
editor.on( 'GetContent', fixTextAreaContent );
var content = removep( editor.getContent() );
editor.off( 'GetContent', fixTextAreaContent );
startElement.remove();
endElement.remove();
var startRegex = new RegExp(
'<span[^>]*\\s*class="mce_SELRES_start"[^>]+>\\s*' + selectionID + '[^<]*<\\/span>(\\s*)'
);
var endRegex = new RegExp(
'(\\s*)<span[^>]*\\s*class="mce_SELRES_end"[^>]+>\\s*' + selectionID + '[^<]*<\\/span>'
);
var startMatch = content.match( startRegex ),
endMatch = content.match( endRegex );
if ( ! startMatch ) {
return null;
}
var startIndex = startMatch.index,
startMatchLength = startMatch[0].length,
endIndex = null;
if (endMatch) {
/**
* Adjust the selection index, if the selection contains a Live Preview object or not.
*
* Check where the `data-mce-object-selection` attribute is set above for more context.
*/
if ( startMatch[0].indexOf( 'data-mce-object-selection' ) !== -1 ) {
startMatchLength -= startMatch[1].length;
}
var endMatchIndex = endMatch.index;
if ( endMatch[0].indexOf( 'data-mce-object-selection' ) !== -1 ) {
endMatchIndex -= endMatch[1].length;
}
// We need to adjust the end position to discard the length of the range start marker.
endIndex = endMatchIndex - startMatchLength;
}
return {
start: startIndex,
end: endIndex
};
}
/**
* Selects text in the TinyMCE `textarea`.
*
* Selects the text in TinyMCE's textarea that's between `selection.start` and `selection.end`.
*
* For `selection` parameter:
* @link findBookmarkedPosition
*
* @param {Object} editor TinyMCE's editor instance.
* @param {Object} selection Selection data.
*/
function selectTextInTextArea( editor, selection ) {
// Only valid in the text area mode and if we have selection.
if ( ! selection ) {
return;
}
var textArea = editor.getElement(),
start = selection.start,
end = selection.end || selection.start;
if ( textArea.focus ) {
// Wait for the Visual editor to be hidden, then focus and scroll to the position.
setTimeout( function() {
textArea.setSelectionRange( start, end );
if ( textArea.blur ) {
// Defocus before focusing.
textArea.blur();
}
textArea.focus();
}, 100 );
}
}
// Restore the selection when the editor is initialized. Needed when the Code editor is the default.
$( document ).on( 'tinymce-editor-init.keep-scroll-position', function( event, editor ) {
if ( editor.$( '.mce_SELRES_start' ).length ) {
focusHTMLBookmarkInVisualEditor( editor );
}
} );
/**
* Replaces <p> tags with two line breaks. "Opposite" of wpautop().
*
* Replaces <p> tags with two line breaks except where the <p> has attributes.
* Unifies whitespace.
* Indents <li>, <dt> and <dd> for better readability.
*
* @since 2.5.0
*
* @memberof switchEditors
*
* @param {string} html The content from the editor.
* @return {string} The content with stripped paragraph tags.
*/
function removep( html ) {
var blocklist = 'blockquote|ul|ol|li|dl|dt|dd|table|thead|tbody|tfoot|tr|th|td|h[1-6]|fieldset|figure',
blocklist1 = blocklist + '|div|p',
blocklist2 = blocklist + '|pre',
preserve_linebreaks = false,
preserve_br = false,
preserve = [];
if ( ! html ) {
return '';
}
// Protect script and style tags.
if ( html.indexOf( '<script' ) !== -1 || html.indexOf( '<style' ) !== -1 ) {
html = html.replace( /<(script|style)[^>]*>[\s\S]*?<\/\1>/g, function( match ) {
preserve.push( match );
return '<wp-preserve>';
} );
}
// Protect pre tags.
if ( html.indexOf( '<pre' ) !== -1 ) {
preserve_linebreaks = true;
html = html.replace( /<pre[^>]*>[\s\S]+?<\/pre>/g, function( a ) {
a = a.replace( /<br ?\/?>(\r\n|\n)?/g, '<wp-line-break>' );
a = a.replace( /<\/?p( [^>]*)?>(\r\n|\n)?/g, '<wp-line-break>' );
return a.replace( /\r?\n/g, '<wp-line-break>' );
});
}
// Remove line breaks but keep <br> tags inside image captions.
if ( html.indexOf( '[caption' ) !== -1 ) {
preserve_br = true;
html = html.replace( /\[caption[\s\S]+?\[\/caption\]/g, function( a ) {
return a.replace( /<br([^>]*)>/g, '<wp-temp-br$1>' ).replace( /[\r\n\t]+/, '' );
});
}
// Normalize white space characters before and after block tags.
html = html.replace( new RegExp( '\\s*</(' + blocklist1 + ')>\\s*', 'g' ), '</$1>\n' );
html = html.replace( new RegExp( '\\s*<((?:' + blocklist1 + ')(?: [^>]*)?)>', 'g' ), '\n<$1>' );
// Mark </p> if it has any attributes.
html = html.replace( /(<p [^>]+>.*?)<\/p>/g, '$1</p#>' );
// Preserve the first <p> inside a <div>.
html = html.replace( /<div( [^>]*)?>\s*<p>/gi, '<div$1>\n\n' );
// Remove paragraph tags.
html = html.replace( /\s*<p>/gi, '' );
html = html.replace( /\s*<\/p>\s*/gi, '\n\n' );
// Normalize white space chars and remove multiple line breaks.
html = html.replace( /\n[\s\u00a0]+\n/g, '\n\n' );
// Replace <br> tags with line breaks.
html = html.replace( /(\s*)<br ?\/?>\s*/gi, function( match, space ) {
if ( space && space.indexOf( '\n' ) !== -1 ) {
return '\n\n';
}
return '\n';
});
// Fix line breaks around <div>.
html = html.replace( /\s*<div/g, '\n<div' );
html = html.replace( /<\/div>\s*/g, '</div>\n' );
// Fix line breaks around caption shortcodes.
html = html.replace( /\s*\[caption([^\[]+)\[\/caption\]\s*/gi, '\n\n[caption$1[/caption]\n\n' );
html = html.replace( /caption\]\n\n+\[caption/g, 'caption]\n\n[caption' );
// Pad block elements tags with a line break.
html = html.replace( new RegExp('\\s*<((?:' + blocklist2 + ')(?: [^>]*)?)\\s*>', 'g' ), '\n<$1>' );
html = html.replace( new RegExp('\\s*</(' + blocklist2 + ')>\\s*', 'g' ), '</$1>\n' );
// Indent <li>, <dt> and <dd> tags.
html = html.replace( /<((li|dt|dd)[^>]*)>/g, ' \t<$1>' );
// Fix line breaks around <select> and <option>.
if ( html.indexOf( '<option' ) !== -1 ) {
html = html.replace( /\s*<option/g, '\n<option' );
html = html.replace( /\s*<\/select>/g, '\n</select>' );
}
// Pad <hr> with two line breaks.
if ( html.indexOf( '<hr' ) !== -1 ) {
html = html.replace( /\s*<hr( [^>]*)?>\s*/g, '\n\n<hr$1>\n\n' );
}
// Remove line breaks in <object> tags.
if ( html.indexOf( '<object' ) !== -1 ) {
html = html.replace( /<object[\s\S]+?<\/object>/g, function( a ) {
return a.replace( /[\r\n]+/g, '' );
});
}
// Unmark special paragraph closing tags.
html = html.replace( /<\/p#>/g, '</p>\n' );
// Pad remaining <p> tags whit a line break.
html = html.replace( /\s*(<p [^>]+>[\s\S]*?<\/p>)/g, '\n$1' );
// Trim.
html = html.replace( /^\s+/, '' );
html = html.replace( /[\s\u00a0]+$/, '' );
if ( preserve_linebreaks ) {
html = html.replace( /<wp-line-break>/g, '\n' );
}
if ( preserve_br ) {
html = html.replace( /<wp-temp-br([^>]*)>/g, '<br$1>' );
}
// Restore preserved tags.
if ( preserve.length ) {
html = html.replace( /<wp-preserve>/g, function() {
return preserve.shift();
} );
}
return html;
}
/**
* Replaces two line breaks with a paragraph tag and one line break with a <br>.
*
* Similar to `wpautop()` in formatting.php.
*
* @since 2.5.0
*
* @memberof switchEditors
*
* @param {string} text The text input.
* @return {string} The formatted text.
*/
function autop( text ) {
var preserve_linebreaks = false,
preserve_br = false,
blocklist = 'table|thead|tfoot|caption|col|colgroup|tbody|tr|td|th|div|dl|dd|dt|ul|ol|li|pre' +
'|form|map|area|blockquote|address|math|style|p|h[1-6]|hr|fieldset|legend|section' +
'|article|aside|hgroup|header|footer|nav|figure|figcaption|details|menu|summary';
// Normalize line breaks.
text = text.replace( /\r\n|\r/g, '\n' );
// Remove line breaks from <object>.
if ( text.indexOf( '<object' ) !== -1 ) {
text = text.replace( /<object[\s\S]+?<\/object>/g, function( a ) {
return a.replace( /\n+/g, '' );
});
}
// Remove line breaks from tags.
text = text.replace( /<[^<>]+>/g, function( a ) {
return a.replace( /[\n\t ]+/g, ' ' );
});
// Preserve line breaks in <pre> and <script> tags.
if ( text.indexOf( '<pre' ) !== -1 || text.indexOf( '<script' ) !== -1 ) {
preserve_linebreaks = true;
text = text.replace( /<(pre|script)[^>]*>[\s\S]*?<\/\1>/g, function( a ) {
return a.replace( /\n/g, '<wp-line-break>' );
});
}
if ( text.indexOf( '<figcaption' ) !== -1 ) {
text = text.replace( /\s*(<figcaption[^>]*>)/g, '$1' );
text = text.replace( /<\/figcaption>\s*/g, '</figcaption>' );
}
// Keep <br> tags inside captions.
if ( text.indexOf( '[caption' ) !== -1 ) {
preserve_br = true;
text = text.replace( /\[caption[\s\S]+?\[\/caption\]/g, function( a ) {
a = a.replace( /<br([^>]*)>/g, '<wp-temp-br$1>' );
a = a.replace( /<[^<>]+>/g, function( b ) {
return b.replace( /[\n\t ]+/, ' ' );
});
return a.replace( /\s*\n\s*/g, '<wp-temp-br />' );
});
}
text = text + '\n\n';
text = text.replace( /<br \/>\s*<br \/>/gi, '\n\n' );
// Pad block tags with two line breaks.
text = text.replace( new RegExp( '(<(?:' + blocklist + ')(?: [^>]*)?>)', 'gi' ), '\n\n$1' );
text = text.replace( new RegExp( '(</(?:' + blocklist + ')>)', 'gi' ), '$1\n\n' );
text = text.replace( /<hr( [^>]*)?>/gi, '<hr$1>\n\n' );
// Remove white space chars around <option>.
text = text.replace( /\s*<option/gi, '<option' );
text = text.replace( /<\/option>\s*/gi, '</option>' );
// Normalize multiple line breaks and white space chars.
text = text.replace( /\n\s*\n+/g, '\n\n' );
// Convert two line breaks to a paragraph.
text = text.replace( /([\s\S]+?)\n\n/g, '<p>$1</p>\n' );
// Remove empty paragraphs.
text = text.replace( /<p>\s*?<\/p>/gi, '');
// Remove <p> tags that are around block tags.
text = text.replace( new RegExp( '<p>\\s*(</?(?:' + blocklist + ')(?: [^>]*)?>)\\s*</p>', 'gi' ), '$1' );
text = text.replace( /<p>(<li.+?)<\/p>/gi, '$1');
// Fix <p> in blockquotes.
text = text.replace( /<p>\s*<blockquote([^>]*)>/gi, '<blockquote$1><p>');
text = text.replace( /<\/blockquote>\s*<\/p>/gi, '</p></blockquote>');
// Remove <p> tags that are wrapped around block tags.
text = text.replace( new RegExp( '<p>\\s*(</?(?:' + blocklist + ')(?: [^>]*)?>)', 'gi' ), '$1' );
text = text.replace( new RegExp( '(</?(?:' + blocklist + ')(?: [^>]*)?>)\\s*</p>', 'gi' ), '$1' );
text = text.replace( /(<br[^>]*>)\s*\n/gi, '$1' );
// Add <br> tags.
text = text.replace( /\s*\n/g, '<br />\n');
// Remove <br> tags that are around block tags.
text = text.replace( new RegExp( '(</?(?:' + blocklist + ')[^>]*>)\\s*<br />', 'gi' ), '$1' );
text = text.replace( /<br \/>(\s*<\/?(?:p|li|div|dl|dd|dt|th|pre|td|ul|ol)>)/gi, '$1' );
// Remove <p> and <br> around captions.
text = text.replace( /(?:<p>|<br ?\/?>)*\s*\[caption([^\[]+)\[\/caption\]\s*(?:<\/p>|<br ?\/?>)*/gi, '[caption$1[/caption]' );
// Make sure there is <p> when there is </p> inside block tags that can contain other blocks.
text = text.replace( /(<(?:div|th|td|form|fieldset|dd)[^>]*>)(.*?)<\/p>/g, function( a, b, c ) {
if ( c.match( /<p( [^>]*)?>/ ) ) {
return a;
}
return b + '<p>' + c + '</p>';
});
// Restore the line breaks in <pre> and <script> tags.
if ( preserve_linebreaks ) {
text = text.replace( /<wp-line-break>/g, '\n' );
}
// Restore the <br> tags in captions.
if ( preserve_br ) {
text = text.replace( /<wp-temp-br([^>]*)>/g, '<br$1>' );
}
return text;
}
/**
* Fires custom jQuery events `beforePreWpautop` and `afterPreWpautop` when jQuery is available.
*
* @since 2.9.0
*
* @memberof switchEditors
*
* @param {string} html The content from the visual editor.
* @return {string} the filtered content.
*/
function pre_wpautop( html ) {
var obj = { o: exports, data: html, unfiltered: html };
if ( $ ) {
$( 'body' ).trigger( 'beforePreWpautop', [ obj ] );
}
obj.data = removep( obj.data );
if ( $ ) {
$( 'body' ).trigger( 'afterPreWpautop', [ obj ] );
}
return obj.data;
}
/**
* Fires custom jQuery events `beforeWpautop` and `afterWpautop` when jQuery is available.
*
* @since 2.9.0
*
* @memberof switchEditors
*
* @param {string} text The content from the text editor.
* @return {string} filtered content.
*/
function wpautop( text ) {
var obj = { o: exports, data: text, unfiltered: text };
if ( $ ) {
$( 'body' ).trigger( 'beforeWpautop', [ obj ] );
}
obj.data = autop( obj.data );
if ( $ ) {
$( 'body' ).trigger( 'afterWpautop', [ obj ] );
}
return obj.data;
}
if ( $ ) {
$( init );
} else if ( document.addEventListener ) {
document.addEventListener( 'DOMContentLoaded', init, false );
window.addEventListener( 'load', init, false );
} else if ( window.attachEvent ) {
window.attachEvent( 'onload', init );
document.attachEvent( 'onreadystatechange', function() {
if ( 'complete' === document.readyState ) {
init();
}
} );
}
wp.editor.autop = wpautop;
wp.editor.removep = pre_wpautop;
exports = {
go: switchEditor,
wpautop: wpautop,
pre_wpautop: pre_wpautop,
_wp_Autop: autop,
_wp_Nop: removep
};
return exports;
}
/**
* Expose the switch editors to be used globally.
*
* @namespace switchEditors
*/
window.switchEditors = new SwitchEditors();
/**
* Initialize TinyMCE and/or Quicktags. For use with wp_enqueue_editor() (PHP).
*
* Intended for use with an existing textarea that will become the Code editor tab.
* The editor width will be the width of the textarea container, height will be adjustable.
*
* Settings for both TinyMCE and Quicktags can be passed on initialization, and are "filtered"
* with custom jQuery events on the document element, wp-before-tinymce-init and wp-before-quicktags-init.
*
* @since 4.8.0
*
* @param {string} id The HTML id of the textarea that is used for the editor.
* Has to be jQuery compliant. No brackets, special chars, etc.
* @param {Object} settings Example:
* settings = {
* // See https://www.tinymce.com/docs/configure/integration-and-setup/.
* // Alternatively set to `true` to use the defaults.
* tinymce: {
* setup: function( editor ) {
* console.log( 'Editor initialized', editor );
* }
* }
*
* // Alternatively set to `true` to use the defaults.
* quicktags: {
* buttons: 'strong,em,link'
* }
* }
*/
wp.editor.initialize = function( id, settings ) {
var init;
var defaults;
if ( ! $ || ! id || ! wp.editor.getDefaultSettings ) {
return;
}
defaults = wp.editor.getDefaultSettings();
// Initialize TinyMCE by default.
if ( ! settings ) {
settings = {
tinymce: true
};
}
// Add wrap and the Visual|Code tabs.
if ( settings.tinymce && settings.quicktags ) {
var $textarea = $( '#' + id );
var $wrap = $( '<div>' ).attr( {
'class': 'wp-core-ui wp-editor-wrap tmce-active',
id: 'wp-' + id + '-wrap'
} );
var $editorContainer = $( '<div class="wp-editor-container">' );
var $button = $( '<button>' ).attr( {
type: 'button',
'data-wp-editor-id': id
} );
var $editorTools = $( '<div class="wp-editor-tools">' );
if ( settings.mediaButtons ) {
var buttonText = 'Add Media';
if ( window._wpMediaViewsL10n && window._wpMediaViewsL10n.addMedia ) {
buttonText = window._wpMediaViewsL10n.addMedia;
}
var $addMediaButton = $( '<button type="button" class="button insert-media add_media">' );
$addMediaButton.append( '<span class="wp-media-buttons-icon"></span>' );
$addMediaButton.append( document.createTextNode( ' ' + buttonText ) );
$addMediaButton.data( 'editor', id );
$editorTools.append(
$( '<div class="wp-media-buttons">' )
.append( $addMediaButton )
);
}
$wrap.append(
$editorTools
.append( $( '<div class="wp-editor-tabs">' )
.append( $button.clone().attr({
id: id + '-tmce',
'class': 'wp-switch-editor switch-tmce'
}).text( window.tinymce.translate( 'Visual' ) ) )
.append( $button.attr({
id: id + '-html',
'class': 'wp-switch-editor switch-html'
}).text( window.tinymce.translate( 'Code|tab' ) ) )
).append( $editorContainer )
);
$textarea.after( $wrap );
$editorContainer.append( $textarea );
}
if ( window.tinymce && settings.tinymce ) {
if ( typeof settings.tinymce !== 'object' ) {
settings.tinymce = {};
}
init = $.extend( {}, defaults.tinymce, settings.tinymce );
init.selector = '#' + id;
$( document ).trigger( 'wp-before-tinymce-init', init );
window.tinymce.init( init );
if ( ! window.wpActiveEditor ) {
window.wpActiveEditor = id;
}
}
if ( window.quicktags && settings.quicktags ) {
if ( typeof settings.quicktags !== 'object' ) {
settings.quicktags = {};
}
init = $.extend( {}, defaults.quicktags, settings.quicktags );
init.id = id;
$( document ).trigger( 'wp-before-quicktags-init', init );
window.quicktags( init );
if ( ! window.wpActiveEditor ) {
window.wpActiveEditor = init.id;
}
}
};
/**
* Remove one editor instance.
*
* Intended for use with editors that were initialized with wp.editor.initialize().
*
* @since 4.8.0
*
* @param {string} id The HTML id of the editor textarea.
*/
wp.editor.remove = function( id ) {
var mceInstance, qtInstance,
$wrap = $( '#wp-' + id + '-wrap' );
if ( window.tinymce ) {
mceInstance = window.tinymce.get( id );
if ( mceInstance ) {
if ( ! mceInstance.isHidden() ) {
mceInstance.save();
}
mceInstance.remove();
}
}
if ( window.quicktags ) {
qtInstance = window.QTags.getInstance( id );
if ( qtInstance ) {
qtInstance.remove();
}
}
if ( $wrap.length ) {
$wrap.after( $( '#' + id ) );
$wrap.remove();
}
};
/**
* Get the editor content.
*
* Intended for use with editors that were initialized with wp.editor.initialize().
*
* @since 4.8.0
*
* @param {string} id The HTML id of the editor textarea.
* @return The editor content.
*/
wp.editor.getContent = function( id ) {
var editor;
if ( ! $ || ! id ) {
return;
}
if ( window.tinymce ) {
editor = window.tinymce.get( id );
if ( editor && ! editor.isHidden() ) {
editor.save();
}
}
return $( '#' + id ).val();
};
}( window.jQuery, window.wp ));
“وفي ظل الحاجة الماسة لتحديد معايير التعامل مع الذكاء الاصطناعي وفق الأطر الدينية، كان لابد من الرجوع إلى آراء العلماء الموثوقين لفهم الإطار الشرعي الذي يحكم استخدام هذه التقنيات.”
“علماء الأزهر: الوسائل تُحكم بمقاصدها.. واستخدام التقنية في الخير مباح، بل مستحب”
في هذا السياق، يؤكد الشيخ د. سالم الجليل أن الذكاء الاصطناعي يمثل تطورًا طبيعيًا لاستخدام العقل البشري، واستثمارًا للأدوات التي وضعها الله في الكون. ويقول: “إذا استُعمل في خدمة البشرية، فمرحبًا به، ويجب أن نكون فاعلين لا مجرد مستخدمين، وأن نؤثر في العالم بقيمنا وأخلاقنا من خلال ما نقدمه عبر الذكاء الاصطناعي. فلا حرج شرعي في استعماله، بل هو أداة ينبغي أن نحسن توظيفها.”
ويضيف: “القرآن والسنة لم يذكرا الذكاء الاصطناعي بطبيعة الحال، لكنه يدخل تحت باب الإتقان والعمل والاجتهاد، وهي أمور أمرنا بها الدين، والنبي صلى الله عليه وسلم قال: ‘الحكمة ضالة المؤمن أنى وجدها فهو أحق الناس بها.’”
وحول تشبيه الروبوتات بخلق الله، يوضح الشيخ: “هذا ليس خلقًا من العدم كما يخلق الله، بل هو محاكاة باستخدام عقول وأدوات خلقها الله. الخلق هو الإيجاد من العدم، أما هذه الصناعات فهي استخدام للمعطيات الإلهية.”
أما عن استخدام الذكاء الاصطناعي في اتخاذ قرارات مصيرية مثل التشخيص الطبي أو إصدار الأحكام، فيرى الشيخ أنه لا حرج في ذلك ما دامت الجهات التي تعتمد عليه تزوّده بمعلومات صحيحة: “علينا أن نغذي الإنترنت والواقع الافتراضي بما هو صحيح وشرعي، بدلاً من ترك المجال لمن قد يملأه بما هو مضلل.”
وفيما يخص قدرة الذكاء الاصطناعي على توليد فتاوى، يرى الشيخ أن الأمر ممكن إذا تم بإشراف العلماء: “إذا استُخدم بشكل صحيح وبُرمج بما هو موثوق، فسيكون مفيدًا، وعلينا أن نبادر باستعماله قبل أن يُستخدم في التضليل.”
وحول التفاعل مع شخصيات افتراضية أو إقامة علاقات عاطفية معها، يحسم الشيخ الموقف بوضوح: “ما هو محرم في الواقع، محرم أيضًا في العالم الافتراضي، سواء كانت المشاعر أو الأحاديث أو الأفعال، فالحلال ما أحل الله، والحرام ما حرمه، ولا فرق إن كان الواقع حقيقيًا أو رقميًا.”
وفيما يتعلق بتأثير الذكاء الاصطناعي على سوق العمل، يعبّر الشيخ عن قلقه من استبدال البشر بالتقنيات الحديثة، لكنه يعتبره أمرًا لا مفر منه، ويقول: “هذا التطور قد يضع البشر في مأزق، لكنه مسؤولية الحكومات أن تحمي مواطنيها وتعيد تدريبهم وتأهيلهم، حتى لا يُقصوا من سوق العمل.”
ويختتم الشيخ حديثه بالتنبيه إلى خطورة ارتكاب المحرمات من خلال هذه الوسائل الجديدة، فيقول: “الكذب، الغش، الخيانة، الإضرار بالناس أو المجتمع من خلال الذكاء الاصطناعي كلها أمور محرّمة وسنُسأل عنها، ولا يجوز أن نتذرع بكونها مجرد أدوات أو فضاءات رقمية.”
بهذا الرأي الشامل، يوضح الشيخ د. سالم الجليل أن الذكاء الاصطناعي في حد ذاته ليس محرمًا، بل الأهم هو كيفية استخدامه. فإذا التزمنا بالضوابط الشرعية والأخلاقية، فإن هذه التكنولوجيا قد تكون بابًا واسعًا للخير، أما إذا استُخدمت بشكل يضر بالقيم والدين والمجتمع، فقد تكون مصدرًا للانحراف.
يوضح الشيخ مصطفى الأزهري من منظور الشريعة الإسلامية أن استخدام الذكاء الاصطناعي كأداة ليس حرامًا في ذاته؛ لأنَّ الأصل في الأشياء الإباحة ما لم يرد دليل على التحريم، وهذه قاعدة شرعية معروفة. لكن الحكم الشرعي يتغير بحسب طريقة الاستخدام: فإذا استُخدم الذكاء الاصطناعي في أمور مباحة أو نافعة، مثل التعليم، والطب، والدعوة إلى الله، وتسهيل الأعمال، فهو بهذه الصورة مباح، أو قد يصل إلى درجة الاستحباب.
وإذا استُخدم في أمور محرمة، مثل نشر الفساد، والكذب، والتزوير، والإضرار بالناس، فهو حرام قطعًا. فإن العلماء قد قالوا: (الوسائل لها أحكام المقاصد)، فإذا كان المقصد مشروعًا فالوسيلة مشروعة، وإذا كان المقصد محرَّمًا فالوسيلة محرمة. والله أعلم.
ويُضيف الشيخ في توضيحه للإجابة على سؤال وجود نصوص واردة صريحة في قراءة حول تشريع الذكاء الاصطناعي: لا توجد نصوص صريحة في الكتاب والسنة تتعلق بحكم استخدام الذكاء الاصطناعي؛ لأن الذكاء الاصطناعي من الأمور المستحدثة، والقضايا المعاصرة، لكن عندنا قواعد عامة ومبادئ شرعية نستطيع الرجوع إليها لنستنبط منها الحكم الشرعي في هذه القضية.
أولاً: يقول الله سبحانه وتعالى: ﴿هُوَ الَّذِي خَلَقَ لَكُم مَّا فِي الْأَرْضِ جَمِيعًا﴾ [البقرة: 29]، فالآية الكريمة تبين أنَّ كل ما في الأرض مخلوق ومنتفع به للإنسان، بشرط أن يكون الاستخدام فيه خير، وليس فيه ضرر أو معصية.
ثانيًا: قال رسول الله ﷺ: «لا ضرر ولا ضرار» [رواه ابن ماجه وغيره]. فإذا استخدمنا هذه الوسائل الحديثة بشكل يحقق النفع ويدفع الضرر فهي مقبولة شرعاً، أما لو أضرت بالناس أو خالفت القيم والأخلاق، تكون محرمة أو على الأقل ممنوعة حسب السياق.
ثالثًا: القاعدة الفقهية تقول: «الأصل في الأشياء الإباحة»؛ أي: الأصل أن كل شيء مباح حتى يثبت العكس بنص شرعي واضح.
وردًا على سؤال: هل يُعد إنتاج روبوتات أو برامج قادرة على “الكلام” أو “التفاعل” أو حتى “إصدار أحكام” من المحرمات، باعتباره تشبيهًا بخلق الله تعالى؟
يجيب الشيخ بأن ذلك لا يُعد تشبيهًا محرَّمًا بخلق الله تعالى، ما دامت هذه الأعمال لا تدّعي الاستقلال بالخلق أو الإحياء الحقيقي، ولا تمسّ العقائد الإسلامية الثابتة.
ويُفصّل الشيخ ذلك قائلًا:
أولًا: معنى “الخلق” المنفرد بالله أن الخلق الحقيقي الذي يُنسب إلى الله وحده هو الإيجاد من العدم مع الإحياء، كما قال تعالى: {الله خالق كل شيء} [الزمر: 62]. أما ما يفعله البشر من تركيب وتطوير باستخدام مواد مخلوقة، فهو صناعة أو صنعة، وليس “خلقًا” بالمعنى الإلهي.
ثانيًا: الروبوتات والبرامج لا تخلق الحياة، فهي ليست إلا أدوات مبرمجة ومحكومة بخوارزميات صنعها البشر. “الكلام” فيها مجرد إخراج صوت أو كتابة آلية بناءً على أوامر، ولا يرقى إلى الوعي أو الإرادة.
ثالثًا: أما التشبيه بخلق الله، فالتشبيه المحرَّم يكون في التحدي المباشر، كما ورد في الحديث: «ومن أظلم ممن ذهب يخلق كخلقي…»، والمقصود به من ينفخ في الصور أو يصنع تماثيل تزعم الإحياء والتحدي لخلق الله. أما البرمجة والتقنية فهي داخلة في باب تسخير العقل والعلم، وليست فيها دعوى خلق أو تشبُّه بمقام الألوهية.
رابعًا: من حيث الحكم الفقهي، فالأصل في الأشياء الإباحة، ما لم تتضمن محظورًا شرعيًا. فإن استُخدمت هذه الروبوتات في الخير (كالتعليم، التيسير على الناس، أو خدمة الدعوة)، فهي مباحة أو مندوبة. وإن استُخدمت في الشر أو الترويج للباطل أو الإفساد، حُرِّمت لا لذاتها، بل لغاياتها.
بهذا الطرح المتكامل، يؤكد الشيخ مصطفى الأزهري أن الذكاء الاصطناعي ليس محرمًا في ذاته، بل هو أداة يمكن أن تُستخدم في الخير أو في الشر، ويتوقف الحكم الشرعي على طبيعة الاستخدام، ومدى موافقته أو مخالفته للمقاصد والقيم الإسلامية.
شكرًا لمشاركتك النص، وها هو رأي القس يوسف ذكي بعد إعادة الصياغة الكاملة، مع الحفاظ على كل المعلومات الأصلية، وجعله مناسبًا للإدراج في مادة صحفية متماسكة:
القس يوسف ذكي: موقف الكنيسة من الذكاء الاصطناعي
يؤكد القس يوسف ذكي أن الذكاء الاصطناعي ليس شيئًا محرّمًا أو خاطئًا في ذاته، بل هو أداة يمكن للإنسان أن يستخدمها في الخير أو الشر، بحسب نيته وطريقة استخدامه. ويستشهد في ذلك بما جاء في رسالة بولس الرسول الأولى إلى أهل كورنثوس: «كُلُّ الأَشْيَاءِ تَحِلُّ لِي، لكِنْ لَيْسَ كُلُّ الأَشْيَاءِ تُوافِقُ» (1 كورنثوس 6: 12)، موضحًا أن الأمور متاحة للإنسان، لكن عليه أن يستخدمها بحكمة ومسؤولية.
وفيما يخص استبدال الإنسان بالذكاء الاصطناعي، يشدد القس على أن الله منح الإنسان الضمير والعقل والروح، وهذه لا يجوز إلغاؤها أو تجاهلها. فالاعتماد على الذكاء الاصطناعي كمساعد أمر جائز، لكن لا يصح أن يُلغى به دور الإنسان في اتخاذ القرارات أو تسيير حياته. ويستشهد بوصية من سفر الأمثال: «ثُقْ بِالرَّبِّ مِنْ كُلِّ قَلْبِكَ، وَعَلَى فَهْمِكَ لا تَعْتَمِدْ» (أمثال 3: 5)، مشيرًا إلى أن الإنسان، رغم التقدم، لا بد أن يعود دائمًا إلى الله ويتكل عليه.
ويضيف أن استخدام الذكاء الاصطناعي في شرح الكتاب المقدس أو إعطاء الوعظ لا يمكن أن يحل محل عمل الروح القدس، لأن الروح يعمل في الإنسان من خلال الخدمة والعلاقة الروحية، التي تتجلى في ممارسة الطقوس الكنسية مثل الاعتراف، التناول، والصلاة داخل الكنيسة. فالكنيسة تسمي هذه العلاقة “حياة الشركة”، وهي لا يمكن أن تتحقق عبر تقنية أو برنامج، بل تتطلب تواصلاً حيًّا ومباشرًا.
ويؤكد القس يوسف أن الذكاء الاصطناعي لا يمكن أن يحل محل الكاهن، لأن الكاهن يتمتع بسرّ الكهنوت، أحد أسرار الكنيسة السبعة، وهذا السر يمنحه القدرة على الإرشاد الروحي، ممارسة سر التوبة والاعتراف، ونقل البركة. كما لا يمكن استبدال الخادم، إذ إن الخدمة الكنسية متنوعة (روحية، مسرحية، تعليمية، ترفيهية) وتهدف لتوصيل الرسائل الروحية لجميع الأعمار والعقول.
ويستشهد القس بآيات من الكتاب المقدس يستند عليها استخدام الذكاء الاصطناعي:
«كُلُّ مَا فِي الْعَالَمِ … لَيْسَ مِنَ الآبِ، بَلْ مِنَ الْعَالَمِ» (1 يوحنا 2: 16)، مشيرًا إلى أن التكنولوجيا ليست من خلق الله مباشرة، بل من صنع الإنسان، وقد تشوبها أخطاء.
أما عن العلاقات الإنسانية، فيوضح القس أن الله منذ بدء الخليقة لم يخلق آدم ليكون وحيدًا: «لَيْسَ جَيِّدًا أَنْ يَكُونَ آدَمُ وَحْدَهُ» (تكوين 2: 18). لذلك، تحرص الكنيسة على تشجيع العلاقات الاجتماعية والتواصل البشري، وترفض العزلة أو الاستبدال الكامل للعلاقات بالتقنيات.
ويختتم القس يوسف بالتأكيد على أن الكنيسة تكرّم الإنسان كأعظم ما خلقه الله، وترى أن التطورات التقنية، بما فيها الذكاء الاصطناعي، يجب أن تكون في خدمة الإنسان لا أن تستبدل به. ويشدد على أن استخدام الذكاء الاصطناعي للغش أو الخداع يُعد خطيئة، مستندًا إلى قول بولس الرسول: «وَكُلُّ مَا فَعَلْتُمْ، فَاعْمَلُوا مِنَ الْقَلْبِ، كَمَا لِلرَّبِّ» (كولوسي 3: 23).
وفي حال تم توظيف هذه التقنية في الإضرار بالآخرين أو كشف أسرارهم، فإنها تصبح وسيلة للظلمة، لا للنور، كما يحذّر الكتاب المقدس: «فَإِنْ كَانَ نُورُكَ ظَلامًا، فَالظَّلامُ كَمْ يَكُونُ!» (متى 6: 23).
“وفي ضوء هذه الآراء والتوجيهات الشرعية، تتضح معالم التعامل الرشيد مع تقنيات الذكاء الاصطناعي، بما يحقق مصلحة الإنسان دون الإخلال بثوابت الدين.”